net：ERR_UPLOAD_FILE_CHANGED in Chrome_net::err_upload_file_changed

最近遇到了一个上传文件的问题，发送请求的时候控制台显示错误 net：ERR_UPLOAD_FILE_CHANGED，特此在此记录解决方案。

1. 问题场景

当我们需要在前端上传文件发送给后端的时候，如果我们在将文件上传后（没有发送ajax前），改变了本地文件的内容，那么这个请求将无法发送到后端。更详细的步骤如下：

• 将本地文件上传到 Web 页面上
• 更改此本地文件的内容，并 ctrl + s
• 发送请求，将此文件传输到后端
• ajax报错：net：ERR_UPLOAD_FILE_CHANGED
• F12 查看network，Request请求头显示黄色感叹号，并提示 Provisional headers are shown

2. 问题原因

关于这个问题，查了很久，发现有两种解释：

• 一说文件修改后file的本地文件已经丢失
• 另一说是此文件已经变为另一个文件，如果没有其他用户操作（例如重新上传此文件），我们不能访问此文件，否则将是安全问题

不管是哪种原因，事实证明当我们改了文件内容后，我们确实无法使用这个文件。

3. 解决方案

• 上传时将 file 转为 base64

const fileToBase64 = (file,callback) =>{
    const reader = new FileReader();
    reader.readAsDataURL(file);
    reader.onload = (e)=>{
        callback(e.target.result);
    }
}

• 发送请求前将 base64 转回 file

const dataURLToFile => (dataurl, filename) {
  const arr = dataurl.split(',')
  const bstr = window.atob(arr[1])
  let n = bstr.length
  const u8arr = new Uint8Array(n) 
  while (n--) {
    u8arr[n] = bstr.charCodeAt(n)
  }
  // 由于我上传的是excel，因为这里type是excel的type 
  return new File([u8arr], filename, {
    type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
  })
}

 一个比较果断的做法就是在上传文件的时候，直接将文件进行转换后存储到变量里，以下代码为React + antd 代码示例

const uploadFile = useRef();
 
// 文件上传的监听函数
const handleFileChange = (e)=>{
    // 先将 file 转为 base64
    fileToBase64(e.file,(dataUrl)=>{
        // 再将 base64 转回 file
        const cacheFile = dataURLToFile(dataUrl,e.file.name);
    
        // 此时文件已经存储到内存中，与本地文件脱离了关系，不会再受影响
        uploadFile.current = cacheFile
    })
}