【element】基于若依的基本图片上传，实现复制粘贴上传图片文件，带图片预览功能

el-upload子组件内容

<template><div class="component-upload-image"><el-upload multipledrag:action="uploadImgUrl"list-type="picture-card":on-success="handleUploadSuccess":before-upload="handleBeforeUpload":limit="limit":http-request="upLoad":on-error="handleUploadError":on-exceed="handleExceed"ref="imageUpload":on-remove="handleDelete":show-file-list="true":auto-upload="false":headers="headers":file-list="fileList":on-preview="handlePictureCardPreview":class="{hide: this.fileList.length >= this.limit}"><i class="el-icon-plus"></i></el-upload><!-- 上传提示 --><div class="el-upload__tip"slot="tip"v-if="showTip">请上传<template v-if="fileSize"> 大小不超过 <b style="color: #f56c6c">{{ fileSize }}MB</b> </template><template v-if="fileType"> 格式为 <b style="color: #f56c6c">{{ fileType.join("/") }}</b> </template>的文件</div><el-dialog :visible.sync="dialogVisible"title="预览"width="800"append-to-body><img :src="dialogImageUrl"style="display: block; max-width: 100%; margin: 0 auto" /></el-dialog></div>
</template><script>
import { getToken } from "@/utils/auth";
import { uploadImg } from "@/api/tools/uploadImg.js"
export default {props: {value: [String, Object, Array],// 图片数量限制limit: {type: Number,default: 1,},// 大小限制(MB)fileSize: {type: Number,default: 5,},// 文件类型, 例如['png', 'jpg', 'jpeg']fileType: {type: Array,default: () => ["png", "jpg", "jpeg"],},// 是否显示提示isShowTip: {type: Boolean,default: true}},data () {return {number: 0,uploadList: [],dialogImageUrl: "",dialogVisible: false,hideUpload: false,baseUrl: process.env.VUE_APP_BASE_API,uploadImgUrl: process.env.VUE_APP_BASE_API + "/common/upload", // 上传的图片服务器地址headers: {Authorization: "Bearer " + getToken(),},fileList: [],tempIndex: 0};},created () {},watch: {value: {handler (val) {if (val) {// 首先将值转为数组const list = Array.isArray(val) ? val : this.value.split(',');// 然后将数组转为对象数组this.fileList = list.map(item => {if (typeof item === "string") {if (item.indexOf(this.baseUrl) === -1) {item = { name: this.baseUrl + item, url: this.baseUrl + item };} else {item = { name: item, url: item };}}return item;});} else {this.fileList = [];return [];}},deep: true,immediate: true},},computed: {// 是否显示提示showTip () {return this.isShowTip && (this.fileType || this.fileSize);},},methods: {// 上传前loading加载handleBeforeUpload (file) {let isImg = false;if (this.fileType.length) {let fileExtension = "";if (file.name.lastIndexOf(".") > -1) {fileExtension = file.name.slice(file.name.lastIndexOf(".") + 1);}isImg = this.fileType.some(type => {if (file.type.indexOf(type) > -1) return true;if (fileExtension && fileExtension.indexOf(type) > -1) return true;return false;});} else {isImg = file.type.indexOf("image") > -1;}if (!isImg) {this.$modal.msgError(`文件格式不正确, 请上传${this.fileType.join("/")}图片格式文件!`);return false;}if (this.fileSize) {const isLt = file.size / 1024 / 1024 < this.fileSize;if (!isLt) {this.$modal.msgError(`上传头像图片大小不能超过 ${this.fileSize} MB!`);return false;}}this.$modal.loading("正在上传图片，请稍候...");this.number++;},// 文件个数超出handleExceed () {this.$modal.msgError(`上传文件数量不能超过 ${this.limit} 个!`);},// 上传成功回调handleUploadSuccess (res, file) {if (res.code === 200) {this.uploadList.push({ name: res.fileName, url: res.fileName });this.uploadedSuccessfully();} else {this.number--;this.$modal.closeLoading();this.$modal.msgError(res.msg);this.$refs.imageUpload.handleRemove(file);this.uploadedSuccessfully();}},// 删除图片handleDelete (file) {const findex = this.fileList.map(f => f.name).indexOf(file.name);if (findex > -1) {this.fileList.splice(findex, 1);this.$emit("input", this.listToString(this.fileList));}},// 上传失败handleUploadError () {this.$modal.msgError("上传图片失败，请重试");this.$modal.closeLoading();},// 上传结束处理uploadedSuccessfully () {if (this.number > 0 && this.uploadList.length === this.number) {this.fileList = this.fileList.concat(this.uploadList);this.uploadList = [];this.number = 0;this.$emit("input", this.listToString(this.fileList));// this.$modal.closeLoading();}},// 预览handlePictureCardPreview (file) {this.dialogImageUrl = file.url;this.dialogVisible = true;},// 对象转成指定字符串分隔listToString (list, separator) {let strs = "";separator = separator || ",";for (let i in list) {if (list[i].url) {strs += list[i].url.replace(this.baseUrl, "") + separator;}}return strs != '' ? strs.substr(0, strs.length - 1) : '';},
//主要逻辑结构如下//手动上传submitUpload () {this.$refs.imageUpload.submit();},upLoad (item) {let FormDatas = new FormData()FormDatas.append('file', item.file);this.uploadImg(FormDatas, item)},uploadImg (FormDatas, item) {uploadImg(FormDatas).then(res => {this.number++;this.handleStart(res, item)})},
// 处理数据handleStart (rawFile, fileres) {rawFile.uid = Date.now() + this.tempIndex++;let file = {status: 'success',name: rawFile.fileName,size: rawFile.size,percentage: 0,uid: rawFile.uid,raw: fileres.file,url: rawFile.fileName,response: rawFile};// 调用若依本身的上传成功所需要的函数传入内容this.handleUploadSuccess(rawFile, file)if (this.listType === 'picture-card' || this.listType === 'picture') {try {file.url = URL.createObjectURL(rawFile);} catch (err) {console.error('[Element Error][Upload]', err);return;}}}}
};
</script>
<style scoped lang="scss">
// .el-upload--picture-card 控制加号部分
::v-deep.hide .el-upload--picture-card {display: none;
}
// 去掉动画效果
::v-deep .el-list-enter-active,
::v-deep .el-list-leave-active {transition: all 0s;
}::v-deep .el-list-enter,
.el-list-leave-active {opacity: 0;transform: translateY(0);
}
::v-deep .el-upload-dragger {width: auto;height: auto;
}
</style>

父组件调用粘贴事件

 <el-form-item label="图片"prop="pic"@paste.native.capture.prevent="handlePaste"><ImgUpload v-model="form.pic":isShowTip="false"ref="ImgUpload" />
</el-form-item>


// 粘贴事件handlePaste (e) {// 粘贴事件处理数据var clipboardData = e.clipboardData; // IEif (!clipboardData) {//chromeclipboardData = e.originalEvent.clipboardData;}var items = '';items = (e.clipboardData || window.clipboardData).items;let file = null;if (!items || items.length === 0) {this.$message.error('当前浏览器不支持粘贴本地图片，请打开图片复制后再粘贴！');return;}// 搜索剪切板itemsfor (let i = 0; i < items.length; i++) {// 限制上传文件类型if (items[i].type.indexOf('image') !== -1) {file = items[i].getAsFile();break;}}// 根据upLoad 方法处理所需要的数据， 此方法的参数可以在子组件中打印出来let item = {}item.file = filethis.$refs.ImgUpload.upLoad(item)}}