原因:瀏覽器比較注意文件安全,你修改並保存那就是新的文件,瀏覽器是不具有新文件的訪問權限的,除非你再走一遍選擇文件這個流程
解決:
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清空
} );