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

最新推荐文章于 2024-07-16 16:08:01 发布

snowDreamzzz

最新推荐文章于 2024-07-16 16:08:01 发布

阅读量1.7k

点赞数

分类专栏： pits 文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/qubes/article/details/129061173

版权

pits 专栏收录该内容

190 篇文章 3 订阅

订阅专栏

文章描述了一个在文件上传后被本地修改，从而引发提交错误的问题。问题在于文件修改后，原有的上传文件不再存在。解决方案是通过将文件转换为base64编码进行缓存，在提交时再转回file类型。然而，这种方法会导致提交的文件是修改前的版本。文中提供了file转base64和base64转file的辅助函数，并展示了在http请求中的使用示例。

摘要由CSDN通过智能技术生成

problem

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

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

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

导致的问题

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

reason

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

solution

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

具体：

文件上传后通过file->base64出错；
提交时将 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);
        });
}