Excel ファイルのアップロード時に選択したファイルを変更すると、エラー net::ERR_UPLOAD_FILE_CHANGED が発生する
問題の再発:
フロント エンドは、ファイル アップロード コンポーネントを使用して、コンピュータ上のローカル ファイルをアップロードします。アップロードが成功した後、ローカル ファイルの内容を変更すると、アップロードの送信時にエラーが報告されます。
net::ERR_UPLOAD_FILE_CHANGED理由：
ブラウザはファイルのセキュリティにさらに注意を払っています。ファイルを変更して保存すると、新しいファイルになります (ファイルが変更されると、ファイルのローカル ファイルは失われます)。ブラウザは、次の場合を除き、新しいファイルにアクセスできません。ファイルを選択するプロセスを再度実行します。
解決：
方法1
beforeUpload でアップロードする場合は、ファイルを Base64 に変換してから (bese64 はローカル ファイルの状態とは関係ありません)、ファイルに変換します。
Base64形式で保存する
const reader1 = new FileReader();
reader1.readAsDataURL(file);
reader1.onload = e => {
this.base64Excel = e.target.result;
};Base64からファイルへのメソッド
base64ConvertFile (urlData, filename) { // base64转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
});
},最後に、転送したファイルを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清空
} );