当前位置:网站首页>解决 excel 文件上传时更改选中的文件出现错误net::ERR_UPLOAD_FILE_CHANGED
解决 excel 文件上传时更改选中的文件出现错误net::ERR_UPLOAD_FILE_CHANGED
2022-07-02 22:06:00 【墨语轩】
业务场景:在业务中先选中要上传的 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
边栏推荐
- Market Research - current situation and future development trend of preclinical medical device testing service market
- [ODX studio edit PDX] -0.1- how to quickly view the differences in supported diagnostic information between variant variants (service, sub function...)
- Share how to make professional hand drawn electronic maps
- The book "new programmer 002" is officially on the market! From "new database era" to "software defined car"
- Server response status code
- php优化foreach中的sql查询
- [QT] Q multithreaded development - Analysis of multithreaded application examples (Mandelbrot)
- Notes on key vocabulary of the original English book biography of jobs (IX) [chapter seven]
- Hanoi Tower problem
- Market Research - current situation and future development trend of cell-based seafood market
猜你喜欢
NC50965 Largest Rectangle in a Histogram
Struct, bit segment, enumeration, union
C language, to achieve three chess games
phpcms实现订单直接支付宝支付功能
【外刊】睡眠与减肥
Riding the wind of "cloud native" and stepping on the wave of "digitalization", new programmer 003 starts pre-sale
Share how to make professional hand drawn electronic maps
Basic concepts of image and deep understanding of yuv/rgb
任务和特权级保护
Sql service intercepts string
随机推荐
C language, to achieve three chess games
Market Research - current situation and future development trend of environmental friendly fireworks Market
[shutter] shutter gesture interaction (small ball following the movement of fingers)
540. Single element in ordered array
Oracle-游标
Market Research - current situation and future development trend of preclinical medical device testing service market
Market Research - current market situation and future development trend of aircraft wireless intercom system
U++ 原始内存 学习笔记
It's not easy to say I love you | use the minimum web API to upload files (swagger support) # yyds dry inventory #
New feature of go1.18: introduce new netip Network Library
Leetcode circular linked list (fast and slow pointer) code line by line interpretation
scrcpy这款软件解决了和同事分享手机屏幕的问题| 社区征文
sql service 截取字符串
Ransack combined condition search implementation
The failure rate is as high as 80%. What should we do about digital transformation?
影视随摘
Market Research - current market situation and future development trend of third-party data platform
From personal heroes to versatile developers, the era of programmer 3.0 is coming
Official announcement! The golden decade of new programmers and developers was officially released
[shutter] shutter resource file use (import resource pictures | use image resources)