当前位置:网站首页>解决 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 market situation and future development trend of aircraft audio control panel system
- Basic concepts of image and deep understanding of yuv/rgb
- The book "new programmer 002" is officially on the market! From "new database era" to "software defined car"
- Les trois principaux points de douleur traités par servicemesh
- Lightgbm principle and its application in astronomical data
- An overview of the development of affective computing and understanding research
- [autosar-dcm] - 4.3-how UDS $22 and $2e services read and write NVM data
- App page sharing password rails implementation
- Kubernetes resource object introduction and common commands (4)
- SimpleITK使用——4. 奇怪的問題
猜你喜欢
[ODX studio edit PDX] -0.1- how to quickly view the differences in supported diagnostic information between variant variants (service, sub function...)
Official announcement! The golden decade of new programmers and developers was officially released
sql service 截取字符串
[001] [arm-cortex-m3/4] internal register
[shutter] shutter resource file use (import resource pictures | use image resources)
[staff] Sibelius 7.5.1 score software installation (software download | software installation)
NC50965 Largest Rectangle in a Histogram
数学建模——图与网络模型及方法(一)
Simpleitk use - 3 Common operations
From personal heroes to versatile developers, the era of programmer 3.0 is coming
随机推荐
Ransack combined condition search implementation
[shutter] shutter application theme (themedata | dynamic modification theme)
Based on asp Net (used mobile phone sales management system) +asp Net+c # language +vs2010+ database can be used for course design and post design learning
Market Research - current market situation and future development trend of night vision goggles for pilots
Les trois principaux points de douleur traités par servicemesh
服务可见可观测性
Scrcpy this software solves the problem of sharing mobile screen with colleagues | community essay solicitation
100 important knowledge points that SQL must master: management transaction processing
Market Research - current market situation and future development trend of aircraft wireless intercom system
基于ASP.net的手机销售管理系统(二手手机销售管理系统)+ASP.NET+C#语言+VS2010+数据库可以用于课设、毕设学习
Get off work on time! Episode 6 of Excel Collection - how to split and count document amounts
[QT] QT multithreading development - reentrancy and thread safety
《乔布斯传》英文原著重点词汇笔记(十)【 chapter eight】
JS获取display为none的隐藏元素的宽度和高度的解决方案
Regular expression (2)
ServiceMesh主要解决的三大痛點
"New programmer 003" was officially launched, and the cloud native and digital practical experience of 30+ companies such as Huawei and Alibaba
Leetcode theme [array] -169- most elements
任务和特权级保护
kubernetes资源对象介绍及常用命令(四)