FormData 附加不起作用 - Javascript

最近，我在使用 Javascript 中的 FormData 对象将图像上传到服务器时遇到了一个问题。具体来说，我遇到了无法将 FormData 附加到 XMLHttpRequest 对象的问题。这篇文章将讨论我遇到的问题以及如何解决它。

问题描述

在我的 Javascript 代码中，我创建了一个 FormData 对象，并将一些图像文件追加到其中：

const formData = new FormData();
formData.append('image1', file1);
formData.append('image2', file2);

然后，我创建了一个 XMLHttpRequest 对象，并将 FormData 附加到其中：

const xhr = new XMLHttpRequest();
xhr.open('POST', '/upload', true);
xhr.setRequestHeader('X-Requested-With', 'XMLHttpRequest');
xhr.send(formData);

然而，当我运行我的代码时，我收到了以下错误消息：

Uncaught TypeError: Failed to execute 'append' on 'FormData': parameter 2 is not of type 'Blob'.

在错误消息中，我看到了提示说我没有正确地将 Blob 对象添加到 FormData 中。我检查了我的代码，并确认我正确地将图像文件添加到了 FormData 中。我不明白出了什么问题。

解决方案

经过一番搜索和试错，我发现了一个可能的解决方案。原来，当您在创建 FormData 对象时，您必须为每个文件创建一个新的 Blob 对象。因此，我必须将我的代码修改为以下内容：

const formData = new FormData();
formData.append('image1', new Blob([file1], { type: file1.type }));
formData.append('image2', new Blob([file2], { type: file2.type }));

这个修改将文件包装在一个 Blob 对象中，以确保我正确地将 Blob 对象添加到 FormData 中。我重新运行我的代码，一切正常！

总结

如果您遇到无法将 FormData 附加到 XMLHttpRequest 对象的问题，请检查您是否正确地添加了 Blob 对象。如果您添加了文件对象，而不是 Blob 对象，则会出现错误。最好的做法是在 FormData 中为每个文件创建一个新的 Blob 对象。

希望这篇文章对解决这个问题有所帮助！