赞
踩
业务场景:在业务中先选中要上传的 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 中的文件删掉重新选择就可以了
参考链接:
Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。