element-ui+vue2实现粘贴上传

<style scoped lang="scss">.img-upload{position: relative;display: inline-block;margin-right: 9px;}.image {width: 100px;height: 100px;margin-right: 9px;}.image:last-child{margin-right: 0;}.img-upload .el-upload--picture-card,.img-upload .el-upload-list__item{height: 100px;width: 100px;line-height: 100px;}.img-upload .el-icon-close-tip{display: none !important;}.img-upload .el-upload-list__item-status-label{display: none !important;}.hide .el-upload--picture-card {display: none;}.img-upload-title-required:before {content: '*';color: #F56C6C;margin-right: 4px;}.el-upload__tip{color: red;}.hide.el-upload-list .el-upload-list__item.is-focus {border: 2px solid red; /* 设置选中图片的红色边框样式 */}
</style><script async defer>var uploadMultiImage  = {template:`<div class="img-upload"><div v-if="!detail"><el-uploadref="upload":class="{hide:hideUpload}":action="action"list-type="picture-card":limit="limit":file-list="fileList":multiple="multiple":on-success="uploadSuccess":on-exceed="uploadExceed":on-change="uploadChange":on-remove="uploadRemove":on-preview="handlePictureCardPreview"@paste.native="handlePaste"><i class="el-icon-plus"></i></el-upload><div :class="required?'img-upload-title img-upload-title-required':'img-upload-title'">{{title}}</div><div v-if="tip" slot="tip" class="el-upload__tip">{{tip}}</div></div><div v-else><div v-if="imageList" ><el-image v-for="(item,index) in fileList"  :key=item.url :src="item.url+'?w=80&h=80'" class="image" :preview-src-list="[item.url]" @click.stop="handleClickItem"></el-image></div></div><el-dialog :visible.sync="dialogVisible"><img width="100%" :src="dialogImageUrl" alt=""></el-dialog></div>`,props: {urls:{type: [String, Array],default(){return []}},action:{type:String,default:'/v1/api/index/upload'},detail:{type:Boolean,default:false},multiple:{type:Boolean,default:false},title:{type:String,default:''},limit:{type:Number,default:1},required:{type:Boolean,default:false},tip:{type:String,default:''},},model:{prop:'urls',event:'valChange'},created(){},watch:{urls(val){this.imageList = val},},data(){return {fileList: this.pathUrls(this.urls),imageList: this.urls,hideUpload: this.isHideUpload(this.urls),dialogImageUrl: '',dialogVisible: false}},mounted() {},computed:{},methods:{/*** 监听粘贴操作*/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;}}// 对复制黏贴的类型进行判断，若是非文件类型，比如复制黏贴的文字，则不会调用上传文件的函数if(file){// console.log(file)// // 生成一个本地的URL用于预览// const url = URL.createObjectURL(file);// console.log(url)// 添加到fileList中，这里示意性地只存放url，实际应根据需求进行适当处理//this.fileList.push({ url: url });let formData = new FormData();formData.append('file', file, 'pasted_image.png'); // 'file' 是后端接口接收文件的字段名，'pasted_image.png' 是文件名console.log(formData);// 上传文件到服务器this.uploadPastedImage(formData);}},uploadPastedImage(formData) {fetch(this.action, {method: 'POST',body: formData}).then(response => response.json()).then(data => {if (data.code) {console.log(data);const newFile = {name: 'pasted_image.png',url: data.domain + '/' + data.data[0],uid: Date.now(), // 确保每个文件有唯一的uidstatus: 'success' // 设置文件状态为成功};//this.fileList = this.fileList.filter(file => !file.url.startsWith('blob:'));this.fileList.push(newFile);this.valChange();} else {this.$message.error('上传失败，请稍后重试');}}).catch(error => {this.$message.error('网络错误，请稍后重试');console.error('Error:', error);});},pathUrls(urls){let fileList = []if(urls.length>0){urls.forEach(function(v) {if(!v.includes('http')){fileList.push({'name': v,'url':'http://image.spocoo.com/' + v,})}else {fileList.push({'name': v,'url': v,})}});}return fileList},nameUrls(fileList){let urls = []fileList.forEach(function(v) {if(v.response){urls.push(v.response.data[0])}else{urls.push(v.url)}});return urls},isHideUpload(urls){return urls.length >= this.limit;},uploadSuccess(res,file, fileList){if (res.code){this.fileList = fileListthis.valChange()}else{layer.msg('网络走丢了，请稍后重试上传哦')}},uploadExceed(){layer.msg(this.title+'最多可以上传'+this.limit+'张图片')},uploadChange(file, fileList) {this.hideUpload = fileList.length >= this.limit;},uploadRemove(file, fileList) {this.fileList.splice(this.fileList.findIndex(e => e.url === file.url), 1)this.hideUpload = fileList.length >= this.limit;this.valChange()},//预览handlePictureCardPreview(file) {this.dialogImageUrl = file.url;this.dialogVisible = true;},valChange(){this.$emit('valChange',this.nameUrls(this.fileList))},handleClickItem(){this.$nextTick(()=>{// 获取遮罩层domlet domImageMask = document.querySelector(".el-image-viewer__mask");if (!domImageMask) {return;}domImageMask.addEventListener("click", () => {// 点击遮罩层时调用关闭按钮的 click 事件document.querySelector(".el-image-viewer__close").click();});})}}}
</script>