“字符串”类型的参数不可分配给“Blob”类型的参数

Question

所以我遇到了这个问题。

import React, { useState } from "react";

const ImageInput: React.FC = () => {
  const [image, setImage] = useState("");
  let reader = new FileReader();
  reader.readAsDataURL(image);

  const handleUpload = (e: React.ChangeEvent<HTMLInputElement>) => {
    const imageValue = e.target.value;

    setImage(imageValue);
  };

  return (
    <input onChange={handleUpload} type="file" multiple={false} value={image} />
  );
};

export default ImageInput;

我正在使用带有 TypeScript 的 React，我正在尝试制作一个图像上传组件，但它给了我这个错误。 我曾尝试研究“Blob”，但没有任何乐趣。 我在 readAsDataURL 中收到错误。

Answer 1

reader将在组件的每个渲染上定义和执行。 这似乎不对，它应该发生在函数内部。

作为readAsDataUrl的输入，不应使用字符串，因为 TypeScript 已经抱怨过，给定文档，输入是File或Blob 。 可以直接从输入组件中检索。 （来源： MDN ）

供参考：“[..] blob 是不可变数据的表示形式，可以读取为文本或二进制”（来源： MDN ）

基于以上两个链接，您的组件可能如下所示（注意： image当前未使用）：

import React, { useState, createRef } from "react";

const ImageInput: React.FC = () => {
  // create a ref to keep a reference to a DOM element, in this case the input
  const imagesUpload = createRef<HTMLInputElement>();
  const [image, setImage] = useState<string | ArrayBuffer | null>(null);

  const handleUpload = (e: React.ChangeEvent<HTMLInputElement>) => {
    // get the file which was uploaded
    const file = imagesUpload?.current?.files?.[0];

    if (file) {
      const reader = new FileReader();
      reader.addEventListener("load", function () {
        // convert image file to base64 string
        setImage(reader.result)
      }, false);
      reader.readAsDataURL(file);
    }
  };

  return (
    <input ref={imagesUpload} onChange={handleUpload} type="file" multiple={false} />
  );
};

export default ImageInput;