时间戳

首页 > 解决方案 > 使用 blob (react) 创建文件时出错：对象必须具有可调用的 @@iterator 属性

javascript - 使用 blob (react) 创建文件时出错：对象必须具有可调用的 @@iterator 属性

问题描述

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

现在我收到错误：

TypeError：无法构造“文件”：对象必须具有可调用的@@iterator 属性

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

相关代码为：

uploadImageHandler = (event) => {
    const tempImage = event.target.files[0];
    const imageType = tempImage.type;

    Resizer.imageFileResizer(
      tempImage,
      300,
      300,
      imageType,
      100,
      0,
      (uri) => {
        const file = new File(uri, tempImage.name);
      },
      'blob',
    );
};

当我uri在尝试执行之前执行控制台登录时，new File它会返回

Blob {size: 127332, type: "image/image/jpeg"}
size: 127332
type: "image/image/jpeg"
__proto__: Blob
arrayBuffer: ƒ arrayBuffer()
size: (...)
slice: ƒ slice()
stream: ƒ stream()
text: ƒ text()
type: (...)
constructor: ƒ Blob()
Symbol(Symbol.toStringTag): "Blob"
get size: ƒ size()
get type: ƒ type()
__proto__: Object

标签： javascriptreactjsimage

解决方案

我的理解是文件构造函数可以将 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);
...

它应该没有您描述的问题。

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

推荐阅读