使用 blob 创建文件时出错（反应）：对象必须具有可调用的 @@iterator 属性

Question

我正在使用https://www.npmjs.com/package/react-image-file-resizer来获取我上传的文件并调整其大小，然后再将其发送到进行一些分析的后端 API。

\n

现在我收到错误：

\n

\n

类型错误：无法构造“文件”：该对象必须具有可调用\n@@iterator 属性

\n

\n

我的理解是，文件构造函数可以将 blob 作为第一个参数，并且 resizer 函数提供该 blob。所以，我不确定我哪里短路了。我确实知道我的输入很好，因为我在正在工作的同一组件中调用了另一个调整器（它提供了调整大小文件的 Base64 编码版本，我在处理之前将其显示为原始图像）

\n

相关代码是：

\n

uploadImageHandler = (event) => {\n    const tempImage = event.target.files[0];\n    const imageType = tempImage.type;\n\n    Resizer.imageFileResizer(\n      tempImage,\n      300,\n      300,\n      imageType,\n      100,\n      0,\n      (uri) => {\n        const file = new File(uri, tempImage.name);\n      },\n      \'blob\',\n    );\n};\n

\n

uri当我在尝试执行之前执行 console.log 时，new File它会返回

\n

Blob {size: 127332, type: "image/image/jpeg"}\nsize: 127332\ntype: "image/image/jpeg"\n__proto__: Blob\narrayBuffer: \xc6\x92 arrayBuffer()\nsize: (...)\nslice: \xc6\x92 slice()\nstream: \xc6\x92 stream()\ntext: \xc6\x92 text()\ntype: (...)\nconstructor: \xc6\x92 Blob()\nSymbol(Symbol.toStringTag): "Blob"\nget size: \xc6\x92 size()\nget type: \xc6\x92 type()\n__proto__: Object\n

\n

Answer 1

我的理解是，文件构造函数可以将 blob 作为第一个参数，并且 resizer 函数提供该 blob。

这几乎是正确的:)。如果我们仔细阅读规范：

句法

new File(bits, name[, options]);

bits

数组！！！的ArrayBuffer，ArrayBufferView，Blob， ...

所以我想如果你改变你的代码：

...
(uri) => {
   const file = new File(uri, tempImage.name);
...

到：

...
(uri) => {
   const file = new File([uri], tempImage.name);
...

它应该可以正常工作，不会出现您所描述的问题。

这只是我的猜测 - 我没有测试过！