el-uploader 文件上传后，又被修改，无法提交到后端 ERR_UPLOAD_FILE_CHANGED_el-upload组件 怎么捕获报错net::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 = cacheFile
    axios.post('/order/create', this.dataForm)
        .then(function (response) {
            console.log(response);
        })
        .catch(function (error) {
            console.log(error);
        });
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49