使用react-dnd

问题描述

我正在尝试创建一个用于上传单张图片的拖放区，并希望使用函数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()的结构，并感谢您提供任何解决方法的提示。

解决方法

我的猜测是，您需要确保 def handle_received_data(self): global wf_data global wf_data2 global wf_data3 global wf_data4 wf_data = deque(maxlen = 4800) wf_data2 = deque(maxlen = 4800) wf_data3 = deque(maxlen = 4800) wf_data4 = deque(maxlen = 4800) while receivedata_bool == True: wf_data_temp = np.array(queue.get(),dtype='uint8') wf_data_temp = self.eight_to_16bit(wf_data_temp) wf_data_temp = deque(wf_data_temp) for i in range(0,len(wf_data_temp),4): wf_data.append(wf_data_temp[i]) wf_data2.append(wf_data_temp[i+1]) wf_data3.append(wf_data_temp[i+2]) wf_data4.append(wf_data_temp[i+3]) def eight_to_16bit(self,data): for i in range(0,len(data),2): LSB = '{:08b}'.format(data[i]) MSB = '{:08b}'.format(data[i + 1]) val = MSB + LSB val = self.twos_comp(int(val,2),16) yield val 有一个值（不是res.files[0]或undefined）。

null

如果这没有帮助，您也可以尝试检查 if(res.files[0]){ reader.readAsDataURL(res.files[0]); } 的类型。