React-dropzone获取Blob文件转Base64并上传服务器的问题咨询

我来帮你搞定这个问题！你遇到的核心问题应该是误把Blob预览URL当成了可上传的文件源——服务器根本没法通过这个本地URL拿到文件内容。下面给你一步步的解决方案：

第一步：正确获取原始File对象 #

React-dropzone返回的rawFile才是真正的File对象（包含文件的二进制内容），而src只是浏览器生成的本地预览Blob URL，只能用于前端预览，不能直接传给服务器。

从你的picture数组里提取原始文件：

const selectedFile = picture[0].rawFile; // 这是真正的File对象
const fileName = picture[0].title;

第二步：将File转为Base64字符串 #

用浏览器原生的FileReader API来完成转码，封装成Promise更方便异步处理：

function fileToBase64(file) {
  return new Promise((resolve, reject) => {
    const reader = new FileReader();
    // 转码完成时返回结果
    reader.onload = () => resolve(reader.result);
    // 处理转码错误
    reader.onerror = (error) => reject(error);
    // 以Data URL格式读取文件（结果就是Base64字符串）
    reader.readAsDataURL(file);
  });
}

第三步：上传Base64到服务器 #

你可以选择两种上传方式，根据后端接口要求来选：

方式1：通过FormData上传（适合接受表单数据的后端） #

async function uploadFile() {
  try {
    const base64String = await fileToBase64(selectedFile);
    const formData = new FormData();
    // 把Base64字符串和文件名添加到FormData
    formData.append('base64File', base64String);
    formData.append('fileName', fileName);

    // 发送POST请求
    const response = await fetch('/your-upload-api-endpoint', {
      method: 'POST',
      body: formData
    });

    if (response.ok) {
      console.log('文件上传成功！');
      // 处理成功逻辑
    } else {
      console.error('上传失败，请检查接口');
    }
  } catch (error) {
    console.error('转码或上传出错：', error);
  }
}

方式2：通过JSON上传（适合接受JSON格式的后端） #

如果后端要求接收JSON，就把Base64放到JSON payload里：

async function uploadFile() {
  try {
    const base64String = await fileToBase64(selectedFile);
    const payload = {
      file: base64String,
      fileName: fileName
    };

    const response = await fetch('/your-upload-api-endpoint', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json'
      },
      body: JSON.stringify(payload)
    });

    if (response.ok) {
      console.log('文件上传成功！');
    } else {
      console.error('上传失败，请检查接口');
    }
  } catch (error) {
    console.error('转码或上传出错：', error);
  }
}

额外建议：如果后端支持，直接上传File对象更高效 #

Base64编码会让文件体积增大约33%，如果后端可以直接接受FormData里的File对象，完全不用转Base64，直接传原始文件更高效：

const formData = new FormData();
formData.append('file', selectedFile, fileName); // 直接append原始File对象

// 然后发送请求，和上面的FormData上传逻辑一致

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