Reason: the local file of file has been lost after the file is modified

Solution:

1. When uploading beforeupload, change the file to Base64 (bese64 has nothing to do with the local file status), and then change it to file. (this is troublesome. You can ask the background if you can change it and get the data through blob or arraybuffer)

Save Base64 format

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

Base64 to file method:

  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
    });
  },

Finally, upload the transferred file through formdata

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

2. When you click upload, you will be prompted to modify the file

  this.file.slice( 0, 1 ) // only the first byte
  .arrayBuffer() // try to read
  .then( () => {
    // The file hasn't changed, and you can send requests here
    console.log( 'should be fine' );
    axios({.........})
  } )
  .catch( (err) => {
    // There is a problem with the file, terminate it here
    console.log( 'failed to read' );
    this.file = null; // Empty the cached file
  } );