Solve the error of changing the selected file when uploading excel file. Net:: err_ UPLOAD_ FILE_ CHANGED

Business scenario ： In the business, first select the one to upload excel, And then back to excel Folder to open the file , Modify the file and save , Go back to the page and click upload （ This demand is also the first time I have encountered , Can only say a cow ）

reason ： After modifying the contents of the document file Your local file has been lost

solve ：
1. Upload beforeUpload When will file Turn into base64（bese64 It has nothing to do with the local file status ）, Again into file.（ This is more troublesome , You can ask whether the backstage can change , adopt blob perhaps arraybuffer get data ）

preservation base64 Format

  const reader1 = new FileReader();
  reader1.readAsDataURL(file);
  reader1.onload = e => {
    this.base64Excel = e.target.result;
  };

base64 turn file Method ：

  base64ConvertFile (urlData, filename) { // 64 turn 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
    });
  },

Finally, turn it out file adopt formdata Upload

  let excel = new FormData();
  let form = this.base64ConvertFile(this.base64Excel, this.excelFile.name);
  excel.append('file', form);

2. Click upload to prompt for file modification

  this.file.slice( 0, 1 ) // only the first byte
  .arrayBuffer() // try to read
  .then( () => {
    //  The file hasn't changed , You can send a request here 
    console.log( 'should be fine' );
    axios({.........})
  } )
  .catch( (err) => {
    //  There is something wrong with the document. , Stop here 
    console.log( 'failed to read' );
    this.file = null; //  Put the cached file Empty 
  } );

programme 1 What is uploaded is the one before modification excel file , See whether the specific business can be accepted

programme 2  It is the optimal solution in the case that scheme 1 is unacceptable , Prompt to let go input Delete the file in and reselect it  

Reference link ：

solve excel There is an error in changing the selected file when uploading the file net::ERR_UPLOAD_FILE_CHANGED