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's doc：

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 Converter函数

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

ReactJS base64文件上传

2 个答案: