React+Redux-form结合Dropzone.js上传图片：如何获取二进制数据？

我明白你遇到的问题了——现在表单提交时只传了图片的预览Blob地址，而不是实际的文件二进制数据。这是因为Redux-Form默认会把表单数据序列化为JSON，但JSON无法处理二进制文件，而且Dropzone返回的文件对象里的preview只是临时URL，不是实际文件内容。下面是具体的修复方案：

1. 调整提交函数，使用FormData传输数据 #

首先，你需要修改表单的提交逻辑，不再用普通的JSON提交，而是构建FormData对象来包装所有表单数据（包括文件）。这样才能正确传输二进制文件：

const onSubmit = (formValues, dispatch) => {
  const formData = new FormData();
  
  // 添加非文件字段（如果你的表单有其他输入项，比如标题、描述等）
  // 示例：formData.append('landTitle', formValues.landTitle);
  
  // 添加文件数组
  if (formValues.files && Array.isArray(formValues.files)) {
    formValues.files.forEach((file, index) => {
      // 这里直接传入file本身，它是原生File对象，包含实际二进制数据
      formData.append('files[]', file);
    });
  }

  // 发送请求（这里以fetch为例，用axios也类似）
  return fetch('/你的API接口地址', {
    method: 'POST',
    body: formData,
    // 注意：浏览器会自动为FormData设置正确的Content-Type，无需手动指定
  })
  .then(response => response.json())
  .catch(error => {
    console.error('上传失败:', error);
    // 这里可以添加错误提示逻辑
  });
};

2. 确认Dropzone的onChange逻辑正确 #

你的Dropzone渲染函数其实已经在传递正确的File数组了：Dropzone的onDrop回调返回的filesToUpload是包含原生File对象的数组（每个对象带preview属性是Dropzone添加的预览地址，但本身还是标准File实例）。所以当前的field.input.onChange(filesToUpload)是没问题的，不需要修改这部分。

3. 可选：优化Redux-Form的字段存储 #

如果你担心Redux-Form会对File对象做不必要的序列化，可以给字段添加normalize函数，确保存储的是原始File对象：

<Field 
  name="files" 
  component={renderDropzoneInput} 
  normalize={(value) => value} // 强制保持值为原始File数组
/>

问题根源说明 #

当你直接把表单数据作为JSON提交时，JavaScript会把File对象序列化为包含preview等属性的普通对象，实际的二进制数据会丢失。只有用FormData才能正确封装文件的二进制内容，让后端能解析到真实的文件数据。

按照上面的步骤修改后，你的表单应该就能正确发送图片的二进制数据了。

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