解决net::ERR_UPLOAD_FILE_CHANGED错误的方案

在使用Chrome浏览器上传文件时，可能会遇到net::ERR_UPLOAD_FILE_CHANGED错误。这个错误通常发生在文件被修改后，浏览器无法识别新旧文件。为了解决这个问题，我们需要采取一些措施来检测文件是否被修改，并在必要时让用户重新选择文件。
首先，我们需要了解为什么会出现这个错误。当我们在表单中选择一个文件并尝试上传时，Chrome浏览器会进行一些健全性检查。如果我们在上传过程中修改了文件，浏览器会把原始文件和修改后的文件视为两个不同的文件。由于安全机制，Chrome浏览器不允许上传被修改的文件。
要解决这个问题，我们可以使用File对象的arrayBuffer()方法来获取文件的ArrayBuffer，然后检测文件是否被更改。这个方法可以在axios中捕获net::ERR_UPLOAD_FILE_CHANGED错误，并判断文件是否被修改。
下面是一个示例代码，演示如何使用isFileChanged方法检测文件是否被修改：

const isFileChanged = (file: File): Promise<boolean> => {
return new Promise((resolve, reject) => {
file.slice(0, 1).arrayBuffer().then(() => resolve(false)).catch(() => reject(true))
})
}

这个方法会返回一个Promise，如果文件未被修改，Promise将解析为false；如果文件被修改，Promise将拒绝并返回true。我们可以在表单提交时使用这个方法来检测文件是否被修改。如果返回true，我们可以在表单中清除该文件，让用户重新选择。
除了使用isFileChanged方法，我们还可以考虑使用beforeUpload事件来检测文件是否被修改。当用户选择一个文件后，我们可以捕获beforeUpload事件，并使用isFileChanged方法检测文件是否被修改。如果返回true，我们可以取消上传操作，并提示用户重新选择文件。
下面是一个示例代码，演示如何使用beforeUpload事件和isFileChanged方法：

const uploadFile = (file: File) => {
const isFileChanged = (file: File): Promise<boolean> => {
return new Promise((resolve, reject) => {
file.slice(0, 1).arrayBuffer().then(() => resolve(false)).catch(() => reject(true))
})
}
const formData = new FormData();
formData.append('file', file);
axios.post('/upload', formData, {
headers: {
'Content-Type': 'multipart/form-data'
},
beforeUpload: async (file) => {
if (await isFileChanged(file)) {
alert('文件已被更改，请重新选择');
return false;
}
return true;
}
}).then(() => {
alert('文件上传成功');
}).catch((error) => {\n