React.js，对象中的属性未定义但存在于具有非空值的对象中

Question

我想用 Dropzone 添加图片文件并在浏览器上显示预览。 因此，我必须获得可以在 src 处使用的 <img />。所以我做这个过程：

  const handleAddImages = async (inputImages: any[]): Promise<void> => {
    const imagesWithSrc = inputImages.map((img) => {
      const reader = new FileReader();
      new Promise((resolve, reject) => {
        reader.onloadend = () => resolve(reader.result);
        reader.onerror = reject;
        reader.readAsDataURL(img);
      }).then(() => (img.src = reader.result));
      return img;
    });

    const nextImages = [...currentImages, ...imagesWithSrc];
    handleOnChange({
     //set state
      target: {
        name: "images",
        value: nextImages,
      },
    });
  };

并在此组件中显示图像：

export const FileList = ({
  images
}: any) => {
  const imgs: any[] = images;

  return (
      <Wrapper>
        {imgs.map((img, index) => (
            <ImgBox key={index}>
              <img src={img.src} />
            </ImgBox>
        ))}
      </Wrapper>
  );
};

我有一个图像数组 imgs 并包含图像文件对象。 当我这样做时：

console.log(imgs[0]);

它将输出索引 0 的图像文件对象中的每个属性，包括来自 filereader API 的 base64 格式的图像源 src。

但是当我这样做时：

console.log(imgs[0].src);

它会输出 undefined,

即使我像这样在地图中执行 console.log ：

imgs.map((img, index) => {
  console.log(img);
  console.log(img.src);
})

得到同样的结果，有什么问题？

console.log("imgs[0]", imgs[0]); 
console.log("imgs[0].src", imgs[0].src);

输出：

顺便说一句，我一开始可以通过imgs[0].size获取size属性， 并在添加另一张图片后获取 imgs[0].src。

Answer 1

如 W3C File API 中所定义，File 接口（扩展 Blob）没有 src 属性。虽然您的环境可能会显示 src 属性，但它似乎无法从您的代码中访问，并且可能由您的浏览器的运行时或您的代码的其他部分以某种方式添加，使其无法访问。老实说，如果没有更多信息，我无法确定 src 属性的来源。

如果您想对 File 对象进行 base64 化，请尝试使用 FileReader API：

let blob = imgs[0];

let reader = new FileReader();
reader.readAsDataURL(blob);

reader.onload = function() {
  console.log(reader.result); //-> "data:image/png;base64,iVBORw..."
};

Answer 2

这似乎是文件阅读器 API 的问题，我用这个答案解决了我的问题。 https://stackoverflow.com/a/34495914/16426251