使用element UI的upload组件,打开页面的时候默认从后台加载文件信息,然后显示进去。问题:这个时候用户去删除这个后台的文件,在上传新的文件的时候报错。
BUG重现
通过使用element-ui 来上传文件:
<el-upload
class="upload-demo"
:action="img"
:on-preview="handlePreview"
:on-success="handleSuccess"
:on-remove="handleRemove"
:before-remove="beforeRemove"
:before-upload="beforeLocalUpload"
multiple
:limit="3"
:on-exceed="handleExceed"
:file-list="fileList">
<i class="fa fa-link" aria-hidden="true" style="cursor: pointer;font-size: 20px;"></i>
</el-upload>
文件是选中之后,自动上传的。
beforeLocalUpload(file){
let formData = new FormData;
if(file){
formData.append('files',file);
}
this.uploadImg(formData);
},
上传图片接口:
uploadImg(formData){
this.$http({
method:'post',
url:"/rest/1.0/document/file/upload",
data:formData,
headers: {
'Content-Type': 'multipart/form-data',
},
}).then(res => {
this.fileList.push(res.data.data[0])
})
},
原因
在file-list内的变量是只读的
解决方案
通过多声明了一个变量,一个用来读一个用来写解决的