以下代码按预期工作。在 Google Chrome 上打开页面“https://wiki.epfl.ch/”,并在开发者控制台上执行此代码。注意:页面“https://wiki.epfl.ch/test.php”不存在,因此加载失败,但这不是问题所在。
response = await fetch("https://wiki.epfl.ch/lapa-studio/documents/DTS/laser%20tutorial.pdf");
response.text().then(function(content) {
formData = new FormData();
console.log(content.length);
console.log(content);
formData.append("content", content);
fetch("https://wiki.epfl.ch/test.php", {method: 'POST', body: formData});
})
它记录:
content.length: 57234
content: %PDF-1.3
%���������
4 0 obj
<< /Length 5 0 R /Filter /FlateDecode >>
stream
x��K��F�����;¢�
...
转到 Developer Network 选项卡,选择“test.php”页面,导航到“Requested payload:”,您可以看到以下内容:
------WebKitFormBoundaryOJOOGb7N43BxCRlv
Content-Disposition: form-data; name="content"
%PDF-1.3
%���������
4 0 obj
<< /Length 5 0 R /Filter /FlateDecode >>
stream
...
------WebKitFormBoundaryOJOOGb7N43BxCRlv
问题是请求文件是二进制文件 (PDF),并且文本被“损坏”。它报告大小为 57234 字节,而实际文件大小(使用 wget
命令获取)为 60248 字节。
问题是:如何在不修改的情况下获取和发送二进制数据?
我尝试用response.blob()
替换response.text()
,如下:
response = await fetch("https://wiki.epfl.ch/lapa-studio/documents/DTS/laser%20tutorial.pdf");
response.blob().then(function(content) {
console.log(content.size);
console.log(content);
formData = new FormData();
formData.append("content", content);
fetch("https://wiki.epfl.ch/test.php", {method: 'POST', body: formData});
})
现在我得到这个日志,文件大小正确:
content.size: 60248
content: Blob(60248) {size: 60248, type: "application/pdf"}
但是,转到“开发者网络”选项卡,选择“test.php”页面,导航到“请求的有效负载:”,它显示它发送了一个空的有效负载:
------WebKitFormBoundaryYoibuD14Ah2cNGAd
Content-Disposition: form-data; name="content"; filename="blob"
Content-Type: application/pdf
------WebKitFormBoundaryYoibuD14Ah2cNGAd--
注意:我正在开发的网页不在 wiki.epfl.ch。我提供了这个示例,以便用户可以尝试(并避免“跨源资源共享”问题)。我的“test.php”页面在 php 中,$_POST['content']
在使用 response.text()
时返回内容,但在使用 响应.blob()
。因此,即使 Developer Network 选项卡“Requested payload:”没有显示二进制数据,这个片段仍然无法正常工作。
最佳答案
如果要发送二进制文件,请不要使用 .text()
方法,因为它返回使用 UTF-8 解码的文件,这不是您想要的。相反,使用 .blob()
方法,不尝试解码文件,直接将其用作第二个 fetch()
的 body
参数。因为它可以是 Blob
:
const response = await fetch("https://wiki.epfl.ch/lapa-studio/documents/DTS/laser%20tutorial.pdf");
const content = await response.blob();
console.log(content.size);
fetch("https://wiki.epfl.ch/test.php", { method: 'POST', body: content });
要解析此上传格式,请参阅 this answer .
如果你想将它作为 multipart/form-data
格式附件的一部分上传,你仍然可以使用 FormData
API,但这样做不是必需的将二进制数据发送到您的 PHP 脚本。只是为了完整起见,这里是你应该如何做到这一点:
const response = await fetch("https://wiki.epfl.ch/lapa-studio/documents/DTS/laser%20tutorial.pdf");
const content = await response.blob();
console.log(content.size);
const formData = new FormData();
formData.append("content", content);
fetch("https://wiki.epfl.ch/test.php", { method: 'POST', body: formData });
关于javascript - 如何使用 fetch 和 FormData 发送二进制数据 (blob)?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48447550/