无法使用FileReader将文件从磁盘上载到服务器

时间:2019-09-02 08:58:36

标签: reactjs express filereader

我正在处理一个表单,用于从react组件中的本地磁盘上载文件。上载文件后,应使用POST请求将其发送到服务器,然后使用 express-fileupload 处理该文件以将其上载到服务器。服务器响应该请求太大:

  

PayloadTooLargeError:请求实体太大

以下是组件:

import React, { Component } from 'react';
import axios from 'axios';


class FileUpload extends Component {
  constructor(props) {
    super(props);
    this.state = {
      sendImage: null
    };
    this.openFile = this.openFile.bind(this);
    this.sendFile = this.sendFile.bind(this);
  }
  onChange = (e) => {
    var file = e.target.files[0];
    var reader = new FileReader();
    reader.onloadend = () => {
      this.setState({ sendImage: reader.result })
    }
    reader.readAsDataURL(file);
  }
  openFile(e) {
    this.refs.fileUploader.click();
  }
  sendFile = () => {
    axios.post(this.props.API_URL + "upload/news", { data: this.state.sendImage })
      .then(res => {
      })
  }  
  render() {
    return (
      <>
        <button className="xbutton" onClick={this.sendFile} >Upload</button>
        <button className="xbutton" onClick={this.openFile} >Open</button>
        <
          input
          type="file"
          name="sampleFile"
          ref="fileUploader"
          defaultValue=""
          onChange={e => this.onChange(e)}
        />
      </>
    );
  }
}

export default FileUpload;

请告诉我错误是什么,可以使用这些工具上传文件吗? 谢谢!

0 个答案:

没有答案