在react-dropzone中如何将图片转为base64？上传报错求助

我看了你的代码，问题出在两个关键地方：重复绑定onDrop导致自定义逻辑没生效，以及状态更新时的错误写法，最终让后端收到了列表类型的数据，而不是预期的base64字符串。

问题拆解 #

1. 重复绑定onDrop：你在<Dropzone>组件里写了两次onDrop属性，后面的onDrop={uploadData => { this.setState({ uploadData }); }}会直接覆盖前面的绑定，导致你写的onDropHandler根本没被调用，文件数据还是原始的文件对象数组，没有转成base64。
2. 错误的状态更新逻辑：就算onDropHandler被调用了，this.setState({ uploadData: this.state.uploadData([{ base64: event.target.result }]) })这行代码完全错了——this.state.uploadData是数组，你把它当函数来调用，这会导致状态变成一个混乱的结构，最终提交给后端的肯定不是正确的base64字符串。

修复后的完整代码 #

先确保你的组件初始化了正确的state，然后修正回调和状态更新逻辑：

构造函数（初始化状态与绑定this）

constructor(props) {
  super(props);
  this.state = {
    uploadData: [], // 存储选中的文件信息，用于页面显示
    fileBase64: null // 专门存储转好的base64数据，用于提交后端
  };
  // 提前绑定this，避免每次render都创建新函数
  this.onDropHandler = this.onDropHandler.bind(this);
}

修正后的文件处理函数

onDropHandler(uploadData) {
  // 因为设置了multiple={false}，直接取第一个文件即可
  const selectedFile = uploadData[0];
  if (!selectedFile) return;

  const reader = new FileReader();
  reader.onload = (event) => {
    // 注意：readAsDataURL返回的是带"data:image/xxx;base64,"前缀的字符串
    // 如果后端只需要纯base64内容，就用下面这行截取：
    // const pureBase64 = event.target.result.split(',')[1];
    
    this.setState({
      uploadData: [selectedFile], // 保留文件信息用于页面展示
      fileBase64: event.target.result // 存储转好的base64数据
    });
  };
  // 开始读取文件为base64格式
  reader.readAsDataURL(selectedFile);
}

修正后的render方法

render() {
  return (
    <div className="dropzone">
      <Dropzone
        onDrop={this.onDropHandler} // 只绑定一次正确的处理函数
        accept="image/jpeg, image/png, image/jpg"
        maxSize={200000}
        multiple={false}
      >
        <p>Maksimal 2 MB (JPG/PNG)</p>
      </Dropzone>
      {/* 展示选中的文件信息 */}
      {this.state.uploadData.map(f => (
        <span key={f.name}>
          {f.name} - {f.size} bytes
        </span>
      ))}
    </div>
  );
}

提交后端的注意事项 #

当你提交表单时，要把this.state.fileBase64（或者处理后的纯base64字符串）传给后端，而不是原来的uploadData数组。这样后端收到的就是字符串类型的base64数据，就不会再报TypeError: argument should be a bytes-like object or ASCII string, not 'list'这个错误了。

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