使用React-Dropzone获取用户文件后如何转为可上传至S3的文件

react-dropzone返回的acceptedFiles数组里的元素是标准的File对象，它本身继承自Blob，包含完整的文件二进制数据——控制台打印时只展示元数据是浏览器的默认行为，实际文件内容是存在的。

你可以直接用下面几种方式处理：

• 直接使用File对象上传
  File是Blob的子类，若你的uploadToS3方法支持接收Blob参数，直接传入acceptedFiles[0]即可，代码无需修改：

  const onDrop = useCallback(async acceptedFiles => {
    await uploadToS3({ blob: acceptedFiles[0] })
  }, [])
  

• 显式转换为Blob（可选）
  如果需要明确转成Blob类型，可通过File的slice方法实现：

  const onDrop = useCallback(async acceptedFiles => {
    const file = acceptedFiles[0];
    const blob = file.slice(0, file.size, file.type);
    await uploadToS3({ blob });
  }, [])
  

• 读取文件内容（按需使用）
  若需要先读取文件内容（比如转成ArrayBuffer），可使用FileReader：

  const onDrop = useCallback(async acceptedFiles => {
    const file = acceptedFiles[0];
    const reader = new FileReader();
    
    reader.onload = async (e) => {
      const blob = new Blob([e.target.result], { type: file.type });
      await uploadToS3({ blob });
    };
    
    reader.readAsArrayBuffer(file); // 也可用readAsDataURL获取base64格式内容
  }, [])
  

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