具有react dnd的拖放区域

Question

我正在尝试创建一个用于上传单个图片的拖放区域，并希望使用函数onDrop将其传递到base64编码的URL中的应用程序状态。

import React from "react";
import {useDrop} from 'react-dnd'

export default function MyDropTarget(props) {
const [drop] = useDrop({
accept: "box",
collect: (monitor) => {
const res = monitor.getItem();
if (res && res.files) {
const reader = new FileReader();
reader.onloadend = () => props.onDrop(reader.result);
reader.readAsDataURL(res.files[0]);
}
},
});
return (
<div ref={drop}>
Drag item here
</div>);
};

这就是我使用这个组件的方式：

<DndProvider backend={HTML5Backend}>
<MyDropTarget style={{height: "100px", width: "100px"}} onDrop={updateImage}/>
</DndProvider>

由于我是react-dnd的新手，我遇到了一些问题。我收到了这样一个错误TypeError: Failed to execute 'readAsDataURL' on 'FileReader': parameter 1 is not of type 'Blob'.
我认为我没有正确理解monitor.getItem()的结构，如果有任何关于如何修复它的提示，我将不胜感激。

Answer 1

我的猜测是，您需要确保res.files[0]有一个值(而不是undefined或null(。

if(res.files[0]){
reader.readAsDataURL(res.files[0]);
}

如果没有帮助，您也可以尝试检查res.files[0]的类型。