ReactJS base64文件上传

Question

我在React组件上有这个功能

handleChangeImage: function (evt) {
    console.log("Uploading");
    var self = this;
    var reader = new FileReader();
    var file = evt.target.files[0];

    reader.onload = function(upload) {
        self.setState({
            image: upload.target.result
        });
    };
    reader.readAsDataURL(file);
    console.log(this.state.image);
    console.log("Uploaded");
},

并在这里被称为

<input ref="file" type="file" name="file" 
                              className="upload-file" 
                              id="file"
                              onChange={this.handleChangeImage}
                              encType="multipart/form-data" 
                              required/>

我正在尝试将base64字符串通过AJAX发送到运行Flask的服务器.问题是每次我选择一个文件时,它都会在控制台中记录为null

有趣的是,如果我第二次尝试选择文件,它现在记录整个字符串.我一定是想念一些简单的......

Answer 1

它在控制台中记录为null,因为在打印时状态尚未更改.当您第二次选择文件时,登录控制台的字符串实际上属于您选择的上一个文件.状态尚未更改为您选择的第二个文件.

参考React的文档:

setState()不会立即改变this.state,但会创建挂起状态转换.调用此方法后访问this.state可能会返回现有值.无法保证对setState的调用进行同步操作,并且可以对调用进行批处理以获得性能提升.

如果要打印正确的状态,可以将其记录在回调函数中:

self.setState({
    image: upload.target.result
}, function() {
    console.log(self.state.image);
});

这也可以在1s延迟后改变状态:

reader.onload = function(upload) {
    self.setState({
        image: upload.target.result
    });
};
reader.readAsDataURL(file);    
setTimeout(function() {
  console.log(self.state.image);
}, 1000);

Answer 2

试试这个

输入栏

              <MyTextField
                id="originalFileName"
                type="file"
                inputProps={{ accept: 'image/*, .xlsx, .xls, .csv, .pdf, .pptx, .pptm, .ppt' }}
                required
                label="Document"
                name="originalFileName"
                onChange={e => this.handleFileRead(e)}
                size="small"
                variant="standard"
              />

从计算机读取文件

  handleFileRead = async (event) => {
    const file = event.target.files[0]
    const base64 = await this.convertBase64(file)
    console.log(base64)
  }

Base64 转换器功能

  convertBase64 = (file) => {
    return new Promise((resolve, reject) => {
      const fileReader = new FileReader();
      fileReader.readAsDataURL(file)
      fileReader.onload = () => {
        resolve(fileReader.result);
      }
      fileReader.onerror = (error) => {
        reject(error);
      }
    })
  }