React Hooks中DIV元素onDrop失效：拖拽转Base64图片报错

错误根源 #

拖拽上传时，文件对象并不在e.target.files中——因为drop事件的触发目标是外层的<div>，而非隐藏的<input type="file">元素。你之前调用e.target.files[0]自然会获取到undefined，引发第一个报错；后续传入非Blob类型的undefined给readAsDataURL，就会触发第二个类型错误。

修复步骤 #

1. 修正onDrop事件的文件获取逻辑
   拖拽的文件存储在事件对象的dataTransfer.files属性中，需要从这里取文件，同时必须调用e.preventDefault()阻止浏览器默认打开文件的行为：

   <div className='fileImgContainer'
     draggable={true}
     onDragOver={handleDragOver}
     onDragStart={handleDrag}
     onDrop={(e) => {
       e.preventDefault(); // 阻止浏览器默认打开文件的行为
       const uploadedFile = e.dataTransfer.files[0];
       if (uploadedFile) { // 确保存在文件时再处理
         handleImage(uploadedFile);
       }
     }}
   >
   <!-- 其余代码不变 -->
   </div>
   

2. 确认handleImage函数参数一致性
   你的handleImage函数设计是接收单个File对象（和onChange事件中传入的e.target.files[0]匹配），当前函数逻辑无需修改，仅建议移除无实际作用的return image（因为setImage是异步操作，返回的是旧状态值）：

   const handleImage = (file) => {
     const fileReader = new FileReader();
     fileReader.onloadend = () => {
       if (fileReader.readyState === 2) {
         setForm({ ...form, backdrop_path: fileReader.result });
       }
     };
     fileReader.readAsDataURL(file);
     setImage(true);
   };
   

额外优化建议 #

• 可以添加文件类型校验，确保拖拽的是符合要求的图片文件，和input的accept属性保持一致：

  if (uploadedFile && ['image/png', 'image/jpeg'].includes(uploadedFile.type)) {
    handleImage(uploadedFile);
  }
  

内容的提问来源于stack exchange，提问作者F. Lucas Picco