解决 excel 文件上传时更改选中的文件出现错误net::ERR_UPLOAD_FILE_CHANGED

业务场景:在业务中先选中要上传的 excel,然后再回到 excel 文件夹打开该文件,修改该文件然后保存,回到页面中点击上传(这种需求我也是第一次遇到,只能说一句牛逼)

原因:文件修改内容后file的本地文件已经丢失

解决:
1.上传beforeUpload时将file转成base64(bese64与本地的文件状态已经无关了),再转成file。(这是比较麻烦的,可以先问下后台能不能改,通过blob或者arraybuffer获取数据)

保存base64格式

  const reader1 = new FileReader();
  reader1.readAsDataURL(file);
  reader1.onload = e => {
    this.base64Excel = e.target.result;
  };

base64转file方法:

  base64ConvertFile (urlData, filename) { // 64转file
    var arr = urlData.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
    });
  },

最后把转出来的file通过formdata上传

  let excel = new FormData();
  let form = this.base64ConvertFile(this.base64Excel, this.excelFile.name);
  excel.append('file', form);

2.点击上传时给出文件修改的提示

  this.file.slice( 0, 1 ) // only the first byte
  .arrayBuffer() // try to read
  .then( () => {
    // 文件没改变,在这里可以发请求了
    console.log( 'should be fine' );
    axios({.........})
  } )
  .catch( (err) => {
    // 文件有问题,在这里终止掉
    console.log( 'failed to read' );
    this.file = null; // 把缓存的file清空
  } );

方案 1 上传的是修改之前的 excel 文件,看具体业务能不能接受

方案2  是在方案一不能接受的情况下的最优解,提示让把 input 中的文件删掉重新选择就可以了 

参考链接:

解决excel文件上传时更改选中的文件出现错误net::ERR_UPLOAD_FILE_CHANGED

  • 4
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值