在 React 的粘贴/拖放事件中接收图像文件答案

【问题标题】：Receiving image file in paste/drop event in React在 React 的粘贴/拖放事件中接收图像文件
【发布时间】：2021-07-03 05:39:14
【问题描述】：

我正在开发一种消息服务，该服务允许用户发送带有附件的消息。我使用的是 RTE，但它增加了很多不必要的复杂性，所以现在我的文本框只是 react-textarea-autosize。它按预期工作，但是当用户将图像粘贴/拖放到文本框中时，我试图捕获它并将其存储在显示在消息下方的单独文件数组中。我开始使用“onPaste”事件，并记录事件显示 event.clipboardData 为：

{dropEffect: "none",
effectAllowed: "uninitialized",
files: FileList {length: 0},
items: DataTransferItemList {length: 0},
types: []}

如果复制文本，则使用 event.clipboardData.getData("text") 返回正确结果，如果复制图像，则返回空字符串。然后，我尝试添加一个单独的 div，该 div 设置为“contentEditable:true”，并在其上收听粘贴以确定是否使用 textarea 是问题，虽然我可以明显看到正在粘贴的图像，但事件仍然包含没有有用的数据。这也不适用于拖放图像文件或从其他网站拖放图像。

什么给了？我不明白，因为粘贴事件仍在触发，我主要在 chrome 中对此进行了测试，但 firefox 似乎也遇到了困难，尽管它在 cliboardData 对象中返回了一个类型数组。

是否可以接收从粘贴/拖放事件中捕获的图像文件？

【问题讨论】：

标签： javascript reactjs event-handling

【解决方案1】：

我不知道为什么文件和项目显示长度为零，但我发现 DataTransferItemList 不会在日志中显示属性，而是您必须使用 MDN 文档中引用的 getter 函数。我发现了一个带有数据传输的不同输入的一个很好的小例子。 https://codepen.io/tech_query/pen/MqGgap

form.onpaste = form.ondrop = event => {

    if (event.type === 'drop')  event.preventDefault();
    
    const target = event.target;
    
    const cell = target.nextElementSibling.querySelectorAll('td');
    
    cell[0].textContent = event.type;

    const transfer = event.clipboardData || event.dataTransfer;
    
    cell[1].firstChild.innerHTML = Array.from(
        transfer.items,  item => `<li>${item.kind} ${item.type}</li>`
    ).join('\n');
};

【讨论】：