el-uploader 文件上传后，又被修改，无法提交到后端 ERR_UPLOAD_FILE_CHANGED

problem

文件上传后，又被修改，无法提交到后端
具体步骤：

1. 文件上传
2. 本地文件打开并修改保存
3. 提交ajax

这个问题不仅仅局限于el-uploader，是一个普遍性的问题

导致的问题

• 问题1：提交请求时，控制台报错 net::ERR_UPLOAD_FILE_CHANGED
• 问题2：本地文件下载失败 提示网络出错

reason

第2步文件修改后，之前上传的文件已经不存在，导致提示错误

solution

解决办法：思路是缓存文件

具体：

1. 文件上传后 通过file->base64出错；
2. 提交时将 base64->转回file

结果：

• 控制台不报错，也可以正常下载。
• 但是文件是修改前的文件，不是最新文件

// 辅助方法1：file转为base64
const fileToBase64 = (file) => {return new Promise(resolve => {const reader = new FileReader();reader.readAsDataURL(file);reader.onload = e => {return resolve(e.target.result)};})
}// 辅助方法2：base64转为file
const base64ToFile = (base64, filename) => {var arr = base64.split(',');var type = arr[0].match(/:(.*?);/)[1];var fileExt = type.split('/')[1];var bstr = atob(arr[1]);var n = bstr.length;var u8arr = new Uint8Array(n);while (n--) { u8arr[n] = bstr.charCodeAt(n); }return new File([u8arr], filename, { type: type })
}// httpRequest是指file onchange 这一类的回调事件httpRequest(data) {this.dataForm.file = data.file// 步骤1. 文件变化时 将上传文件转为base64 缓存起来fileToBase64(data.file).then(result=>{this.base64 = result})},// 点击提交按钮，发起ajax请求
onSubmit() {if (!this.dataForm.file) {alert('请先上传文件')return}// 步骤2. 提交请求前将缓存的base64文件转为file文件提交let cacheFile = base64ToFile(this.base64, this.dataForm.file.name);this.dataForm.file = cacheFileaxios.post('/order/create', this.dataForm).then(function (response) {console.log(response);}).catch(function (error) {console.log(error);});
}