如何预览React dropzone组件上的初始文件

Question

React 18:我试图创建一个流，我将转换Base64字符串图像从一个API响应到一个文件对象JS和显示为预览在React dropzone组件，但我不能与Base64字符串生成文件后预览它。

我得到一个地图错误时，试图预览它。它似乎缺少一个包含Blob URL和path属性的预览。

谢谢!

Answer 1

从你的描述来看，你似乎面临着两个问题:

1. 你正在尝试使用.map()映射对象，这就是为什么你得到一个映射错误。为了修复它，测试下面的代码并查看文档;

const object1 = {
a: 'somestring',
b: 42
};
for (const [key, value] of Object.entries(object1)) {
console.log(`${key}: ${value}`);
}

或转换为数组

const map = new Map(Object.entries(obj));

或

const entries = Object.entries(obj);

2. 似乎第二个错误是由于你没有预览URL在你的对象，导致没有显示。为了修复它，请在创建Blob文件后添加以下代码。

files.map(file => ({
...file,
preview: URL.createObjectURL(file)
}))

p。1和2的结果可能相互依赖。