React中如何将DataURI转换为可上传的File对象？

你的处理思路完全没问题！从相机捕获到DataURI后，确实需要把它转换成File对象才能用FormData上传到API端点——毕竟FormData只接受Blob/File类型的数据，而DataURI是一串base64编码的字符串。下面我给你具体的实现方案：

1. 编写DataURI转File的工具函数 #

先写一个通用的转换函数，把DataURI解析并转换成File对象：

const dataUriToFile = (dataUri, filename) => {
  // 拆分DataURI的元数据和base64内容
  const [metaPart, base64Content] = dataUri.split(',');
  // 提取MIME类型（比如image/png）
  const mime = metaPart.match(/:(.*?);/)[1];
  // 解码base64字符串为二进制数据
  const byteString = atob(base64Content);
  const arrayBuffer = new ArrayBuffer(byteString.length);
  const uint8Array = new Uint8Array(arrayBuffer);

  // 将二进制字符写入Uint8Array
  for (let i = 0; i < byteString.length; i++) {
    uint8Array[i] = byteString.charCodeAt(i);
  }

  // 从Blob创建File对象，指定文件名和MIME类型
  return new File([uint8Array], filename, { type: mime });
};

2. 修改你的uploadPhoto函数 #

把上面的工具函数集成到你现有的相机上传逻辑中，替换原来的uploadPhoto方法，让它完成转换并调用API上传：

uploadPhoto = e => {
  console.log('uploading photo');
  const { dataUri } = this.state;
  if (!dataUri) return;

  // 将DataURI转换为File对象，用时间戳作为文件名避免重复
  const photoFile = dataUriToFile(dataUri, `camera-photo-${Date.now()}.png`);
  
  // 复用你原来的文件上传逻辑
  const data = new FormData();
  data.append('file', photoFile);
  data.append('filename', photoFile.name);
  
  fetch('http://localhost:5000/upload', {
    method: 'POST',
    body: data,
  })
  .then(response => response.json())
  .then(response => {
    console.log(response.text);
    this.setState({ 
      text: response.text,
      camColor: 'green', 
      dataUri: null, 
      cameraLoad: false 
    });
    this.getPlate();
  })
  .catch(error => {
    console.error('上传失败:', error);
    // 这里可以添加用户提示，比如弹出错误信息
  });
};

3. 额外注意事项 #

• 文件名自定义：用时间戳命名可以避免不同用户上传的图片同名覆盖，你也可以根据业务需求改成其他命名规则
• 格式一致性：react-html5-camera-photo默认生成PNG格式的图片，如果你的API要求JPG，可以在组件配置里修改imageType="jpg"
• 错误处理：添加catch块处理网络错误或API返回的异常，避免上传失败后页面状态卡住

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