Javascript 如何在react dropzone中将图像转换为base64?

Javascript 如何在react dropzone中将图像转换为base64?,javascript,reactjs,base64,dropzone.js,react-dropzone,Javascript,Reactjs,Base64,Dropzone.js,React Dropzone,我正在尝试在我的应用程序上实现react dropzone,但我无法发布并始终获取内部服务器错误,错误:TypeError:参数应该是类似对象或ASCII字符串的字节,而不是“列表”,以防数据发布必须使用convert base64 这是我的onDrop函数 onDrop(uploadData) { this.setState({ uploadData, }); } onDropHandler(uploadData) { var uploadData = uploadData

我正在尝试在我的应用程序上实现react dropzone,但我无法发布并始终获取内部服务器错误,错误:TypeError:参数应该是类似对象或ASCII字符串的字节,而不是“列表”,以防数据发布必须使用convert base64

这是我的onDrop函数

onDrop(uploadData) {
  this.setState({
    uploadData,
  });
}
onDropHandler(uploadData) {
  var uploadData = uploadData[0];
  const reader = new FileReader();
  reader.readAsDataURL(uploadData);
  reader.onload = event => {
    this.setState({
      uploadData: this.state.uploadData([{ base64: event.target.result }]),
    });
  };
  reader.readAsDataURL(uploadData);
}
这是我的渲染方法:

<div className="dropzone">
  <Dropzone
    onDrop={this.onDrop.bind(this)}
    accept="image/jpeg, image/png, image/jpg"
    onDrop={uploadData => {
      this.setState({ uploadData });
    }}
    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.setState({uploadData});
}}
maxSize={200000}
多重={false}
>
Maksimal 2MB(JPG/PNG)

{this.state.uploadData.map(f=>( {f.name}-{f.size}字节 ))}


也许这会有用

    const handleDrop = React.useCallback((acceptedFiles) => {
      const file = acceptedFiles.find(f => f)
      let reader = new FileReader()

      reader.readAsDataURL(file)
      reader.onload = () => {
        console.log({
          src: file.preview,
          data: reader.result
        })
        setB64(reader.result)
       }

     }, []);

其中
setB64
是一个React
useState
Hook

请将错误消息作为文本包含在问题中。包括完整的回溯。还包括整个react类,而不仅仅是一些方法。这里的
这个.state.uploadData是什么?好像这是一个函数?为什么你在你的州有一个功能?