react 拖拽图片预览

拖拽图片

元素所使用到的事件

• onDrop: 监听文件处于监听元素上方释放时触发
• onDragEnter: 当文件进入该元素时触发一次
• onDragLeave: 当文件离开该元素时触发一次
• onDragOver: 当拖拽文件处于该元素上时触发 每100毫秒执行一次

基于上方所使用的属性，可以在onDragEnter进入时设置拖拽框区域高亮，onDragLeave离开时移除高亮显示

示例 html

<div
  className="dropArea"
  onDrop={onDrop}
  onDragEnter={() => setEnter(true)}
  onDragLeave={() => setEnter(false)}
  onDragOver={e => e.preventDefault()}
>
  <p>拖拽上传文件</p>
</div>

css

.dropArea {
  width: 300px;
  height: 300px;
  border: 1px dashed gray;
  justify-content: center;
  align-items: center;
  display: flex;
}

拖拽元素释放时可以通过onDrop函数捕获信息

1. e.preventDefault() 阻止默认行为
2. 通过e.dataTransfer获取file

  const onDrop = (e) => {
    e.preventDefault();
    if (!e.dataTransfer.items) return;

    const imgs = previewSrc.slice();
    for (let i = 0; i < e.dataTransfer.items.length; i++) {
      if (e.dataTransfer.items[i].kind === "file") {
        const file = e.dataTransfer.items[i].getAsFile();
        const objectUrl = URL.createObjectURL(file);
        imgs.push(objectUrl);
        setPreviewSrc(imgs);
      }
    }
  }

至此，一个基本的图片拖拽预览功能已经完成