起源
应用两个fileList变量,一个赋值给组件只做展现用,一个理论作为新增/删除/上传应用.
应用组件
<el-upload class="upload" action="url" name="files" :file-list="uploadList" :on-error="errUpload" :on-preview="handlePreview" :on-success="handleSuccess" :on-remove="handleRemove" multiple :limit="uploadLimit" :on-exceed="handleExceed" list-type="picture" size="small"> <el-button type="success" size="small" plain>抉择图片</el-button> <div slot="tip" class="el-upload__tip" style="height: 20px"> 只能上传jpg/png文件，且不超过500kb</div> <div slot="tip" class="el-upload__tip">默认第一张为封面,点击将图片设置为第一张</div> </el-upload>定义列表
// 上传文件列表uploadList: [],realFileList: [],操作
handleRemove(file, fileList) { let list = this.realFileList; let len = this.realFileList.length; for (let i = 0; i < len; i++) { if (file.name == list[i].name) { list.splice(i, 1); break; } } }, handlePreview(file) { let list = this.uploadList; let len = this.uploadList.length; for (let i = 0; i < len; i++) { if (file.name == list[i].name) { list.unshift(file); list.splice(i + 1, 1); break; } } }, handleSuccess(res, file, fileList) { let arr = []; fileList.forEach((item) => { let obj = {}; if (item.response) { obj.name = item.response.data[0].fileName; obj.url = item.response.data[0].fileSrc; obj.fileId = item.response.data[0].fileId; } else { obj.name = item.name; obj.url = item.url; obj.fileId = item.fileId; } arr.push(obj); }); this.realFileList = arr; },