1. 程式人生 > 其它 >解決excel檔案上傳時更改選中的檔案出現錯誤net::ERR_UPLOAD_FILE_CHANGED

解決excel檔案上傳時更改選中的檔案出現錯誤net::ERR_UPLOAD_FILE_CHANGED

原因:檔案修改內容後file的本地檔案已經丟失

解決:
1.上傳beforeUpload時將file轉成base64(bese64與本地的檔案狀態已經無關了),再轉成file。(這是比較麻煩的,可以先問下後臺能不能改,通過bolb或者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清空
  } );