如何解决使用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]);
}
的类型。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。