文章目录

前言

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

一、单张图片的上传

// 这是自定义的图片预览的组件，pictureList就是上传的图片<image-list :pictureList.sync="pictureList"@preview="onPreview"></image-list>// 这是上传的标识，当图片大于9张就不允许其上传了，就没有上传的按钮啦。下面的代码也会调用on-exceed，有提示<el-upload v-if="pictureList.length < 9"ref="upload"class="image-upload":limit="limit":accept="accept":multiple="multiple":action="uploadUrl":headers="headers":data="data":show-file-list="showFileList":file-list="pictureList"list-type="picture-card":before-upload="handleBeforeUpload":on-exceed="handleExceed":on-success="handleSuccess"><i class="el-icon-plus"v-loading.fullscreen.lock="uploading"element-loading-text="正在上传，请稍等..."></i><!--<span slot="tip" class="el-upload-tip">只能上传 jpg/png 文件，且不超过 {{maxSize }} MB</span>--></el-upload>// 图片上传之前handleBeforeUpload(file) {let self = this;// 文件类型const typeIsOk = file.type == 'image/jpeg' || file.type == 'image/png';// 文件大小const sizeIsOk = file.size / 1024 / 1024 < self.maxSize;if (typeIsOk && sizeIsOk) {self.uploading = true;}if (!typeIsOk) {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必须是父组件传递过来的truethis.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)}}},