如何通过onDrop事件对象直接获取被拖拽图片的src地址

完全可以直接通过onDrop回调的事件对象拿到被拖拽图片的URL，不需要在onDragStart阶段额外存组件状态，也不需要手动创建HTML img元素。

具体实现方法 #

HTML拖拽规范原生提供了DataTransfer对象作为拖拽源和投放区之间的数据传输通道，对于原生可拖拽的<img>元素，浏览器会在拖拽触发时自动把图片地址写入这个对象，你直接在drop回调里读取就行，完全不需要自己做状态中转。
修改后的投放区代码参考：

<div
  ref={ref}
  onDragOver={(e) => e.preventDefault()}
  onDrop={(e) => {
    e.preventDefault();
    // 直接从事件对象读取被拖拽图片的URL
    const imgUrl = e.dataTransfer.getData('text/uri-list');
    // 后续直接用imgUrl做展示逻辑即可，不需要读取提前存的组件状态
    handleDrop(imgUrl);
  }}          
>
</div>

注意：onDragOver事件里必须调用e.preventDefault()，否则浏览器会触发默认行为拦截drop操作，不会执行onDrop回调，你原有代码里这部分逻辑是正确的。

在线图片拖拽支持性说明 #

这个方案完全支持直接拖拽互联网在线图片到投放区：

• 拖拽同页面你自己渲染的图片时，浏览器会自动把img的src值填充到text/uri-list字段，读取即可使用
• 拖拽其他公开网页上的在线图片到你的投放区时，浏览器同样会自动把图片的在线URL写入上述字段，不需要额外做兼容处理
• 如果拖拽的是本地存储的图片文件，除了路径信息外，你还可以通过e.dataTransfer.files拿到对应的文件对象，直接做本地预览、上传等后续操作
• 极少数做了自定义拖拽逻辑的网站可能会改写拖拽传输的默认字段，遇到这种情况你可以打印e.dataTransfer.types查看实际写入的数据类型，对应取值就行

额外说明 #

你之前在onDragStart里存状态的逻辑属于多此一举，原生img元素触发拖拽时，浏览器默认就会完成数据写入dataTransfer的操作，不需要你手动调用setData传值，也不需要把URL存在组件状态里，省掉这层状态更新还能避免不必要的组件重渲染。

内容的提问来源于stack exchange，提问作者Marwane