手机上怎么支持wap网站,创意电子产品设计,wordpress 邮件通知,青柠影视免费高清电视剧problem
文件上传后#xff0c;又被修改#xff0c;无法提交到后端 具体步骤#xff1a;
文件上传本地文件打开并修改保存提交ajax
这个问题不仅仅局限于el-uploader#xff0c;是一个普遍性的问题
导致的问题
问题1#xff1a;提交请求时#xff0c;控制台报错 net…problem
文件上传后又被修改无法提交到后端 具体步骤
文件上传本地文件打开并修改保存提交ajax
这个问题不仅仅局限于el-uploader是一个普遍性的问题
导致的问题
问题1提交请求时控制台报错 net::ERR_UPLOAD_FILE_CHANGED问题2本地文件下载失败 提示网络出错
reason
第2步文件修改后之前上传的文件已经不存在导致提示错误
solution
解决办法思路是缓存文件
具体
文件上传后 通过file-base64出错提交时将 base64-转回file
结果
控制台不报错也可以正常下载。但是文件是修改前的文件不是最新文件
// 辅助方法1file转为base64
const fileToBase64 (file) {return new Promise(resolve {const reader new FileReader();reader.readAsDataURL(file);reader.onload e {return resolve(e.target.result)};})
}// 辅助方法2base64转为file
const base64ToFile (base64, filename) {var arr base64.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 })
}// httpRequest是指file onchange 这一类的回调事件httpRequest(data) {this.dataForm.file data.file// 步骤1. 文件变化时 将上传文件转为base64 缓存起来fileToBase64(data.file).then(result{this.base64 result})},// 点击提交按钮发起ajax请求
onSubmit() {if (!this.dataForm.file) {alert(请先上传文件)return}// 步骤2. 提交请求前将缓存的base64文件转为file文件提交let cacheFile base64ToFile(this.base64, this.dataForm.file.name);this.dataForm.file cacheFileaxios.post(/order/create, this.dataForm).then(function (response) {console.log(response);}).catch(function (error) {console.log(error);});
}
