当前位置:网站首页>解决 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
边栏推荐
- [leetcode] sword finger offer 11 Rotate the minimum number of the array
- Learn computer knowledge from scratch
- "New programmer 003" was officially launched, and the cloud native and digital practical experience of 30+ companies such as Huawei and Alibaba
- Market Research - current market situation and future development trend of high tibial osteotomy plate
- Unity3d learning notes 4 - create mesh advanced interface
- Pointer and string
- Struct, bit segment, enumeration, union
- U++ learning note pile
- Service visibility and observability
- The failure rate is as high as 80%. What should we do about digital transformation?
猜你喜欢

Lightgbm principle and its application in astronomical data

【ODX Studio编辑PDX】-0.1-如何快速查看各Variant变体间的支持的诊断信息差异(服务,Sub-Function...)

Scrcpy this software solves the problem of sharing mobile screen with colleagues | community essay solicitation

From personal heroes to versatile developers, the era of programmer 3.0 is coming

The book "new programmer 002" is officially on the market! From "new database era" to "software defined car"

开发者分享 | HLS, 巧用AXI_master总线接口指令的定制并提升数据带宽-面积换速度...

建立自己的网站(22)

Riding the wind of "cloud native" and stepping on the wave of "digitalization", new programmer 003 starts pre-sale

Oracle PL / SQL programming

phpcms实现订单直接支付宝支付功能
随机推荐
New feature of go1.18: trylock, which has been tossed n times
Market Research - current market situation and future development trend of high tibial osteotomy plate
《乔布斯传》英文原著重点词汇笔记(十)【 chapter eight】
sql service 截取字符串
Pointer - function pointer
Using emqx cloud to realize one machine one secret verification of IOT devices
LightGBM原理及天文数据中的应用
U++ 学习笔记 堆
Simpleitk use - 3 Common operations
【外刊】睡眠与减肥
ArrayList analysis 2: pits in ITR, listiterator, and sublist
[shutter] shutter page life cycle (initialization period | createstate | initstate | update period | build | destroy period | dispose)
Dynamic memory allocation (malloc calloc realloc free)
New feature of go1.18: introduce new netip Network Library
kubernetes资源对象介绍及常用命令(四)
影视随摘
Market Research - current market situation and future development trend of handheld wound imaging equipment
Leetcode theme [array] -169- most elements
Introduction to database system Chapter 1 short answer questions - how was the final exam?
Server response status code