使用 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] 的类型。

使用 react-dnd 拖放区域

Drag and drop area with react-dnd

javascript

reactjs

file-upload

react-dnd

base64url