element el

2024-02-26 03:30| 来源: 网络整理| 查看: 265

文章目录前言一、单张图片的上传二、一次上传多张图片

前言

这是使用element-ui中的el-upload进行上传的，但是吧，预览是自定义的组件，所以多选会有些麻烦，因为file-list的参数，具体参考例子来讲吧

一、单张图片的上传 // 这是自定义的图片预览的组件，pictureList就是上传的图片 // 这是上传的标识，当图片大于9张就不允许其上传了，就没有上传的按钮啦。下面的代码也会调用on-exceed，有提示 maxSize }} MB--> // 图片上传之前 handleBeforeUpload(file) { let self = this; // 文件类型 const typeIsOk = file.type == 'image/jpeg' || file.type == 'image/png'; // 文件大小 const sizeIsOk = file.size / 1024 / 1024 self.$message.error('只能上传 jpg/png 文件！'); } if (!sizeIsOk) { self.$message.error('单个图片大小不能超过 ' + self.maxSize + 'MB！'); } return typeIsOk && sizeIsOk; }, // 文件超出个数限制时 handleExceed() { let self = this; self.$message.error('最多只能上传' + self.limit + '张图片！'); }, // 图片上传成功 handleSuccess(response) { let self = this; self.uploading = false; if (response.success) { if (Object.keys(response.result).length > 0) { let picture = response.result; if (JSON.stringify(self.pictureList).indexOf(JSON.stringify(picture)) == -1) { self.pictureList.push(picture); } self.$message.success('图片上传成功！'); // 图片列表 self.$emit('update:pictureList', self.pictureList); // 图片上传成功 self.$emit('uploadSuccess', self.pictureList); } } else { self.$message({ showClose: true, duration: 10000, message: response.data + '！', type: 'error' }); // 清空文件列表 self.$refs['upload'].clearFiles(); // 更新上传的文件 self.$emit('update:pictureList', []); } }, // 预览图片 onPreview(pictureList) { let self = this; self.$emit('previewImage', pictureList); } 二、一次上传多张图片

html的代码都是类似的，唯一的区别是file-list，其参数名不能跟图片列表的参数名一致，不然图片列表不能进行push，从而不能预览。因为项目需要，有新增和编辑，所以需要一个editUpload进行图片的深拷贝，作为编辑的时候已上传的数据，以此来控制总数据量便于数量限制

代码如下：

// uploadArr每次打开新增/编辑都要传空过来，就相当于清空fileList :file-list='uploadArr' // 需要写在handleBeforeUpload里面 // 获取第一次进来的数据，用于统计已上传的数据，即编辑 if (this.editFirstFlag1) { // editUpload 仅用以计算用户可上传的图片数量；需要传给图片列表（删除再图片列表组件中进行）并实时更新 this.editUpload = this.pictureList.map(i => JSON.parse(JSON.stringify(i))) this.editFirstFlag1 = false } // 文件超出个数限制时 handleExceed() { let self = this; if(this.editLength == 0){ self.$message.error('最多只能上传' + self.limit + '张图片！'); }else { self.$message.error('已有'+this.editLength+'张图片，此次最多只能上传' + self.limit + '张图片！'); } }, mounted() { // 每次调用组件都要执行，使用v-if强制组件更新；所以editFirstFlag必须是父组件传递过来的true this.editFirstFlag1 = this.editFirstFlag }, computed: { editLength(){ // 编辑的时候已上传的数据 return this.editUpload.length }, }, watch: { editLength:{ immediate:true, handler(newVal, oldVal) { let self = this // 限制图片上传数量的 this.limit = 9 - newVal // console.log(this.limit) } } },

【本文地址】

公司简介

联系我们