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。问题是每次我 select 一个文件，它在控制台

中被记录为 null

有趣的是，如果我第二次尝试 select 该文件，它现在会记录整个字符串。我一定是遗漏了一些简单的东西...

Answer 1

它在控制台中被记录为空，因为在您打印它时状态没有改变。当你第二次 select 文件时，控制台中登录的字符串实际上属于你之前 select 编辑的文件。状态还没有改成你的第二个文件select。

参考React's doc：

setState() does not immediately mutate this.state but creates a pending state transition. Accessing this.state after calling this method can potentially return the existing value. There is no guarantee of synchronous operation of calls to setState and calls may be batched for performance gains.

如果想打印正确的状态，可以在回调函数中记录：

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

这也将起作用，因为状态应在 1 秒延迟后更改：

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);
      }
    })
  }

ReactJS base64 文件上传

ReactJS base64 file upload

filereader

reactjs