用Reactjs和Flask上传文件 [英] file upload with Reactjs and Flask

问题描述

我正在尝试使用reactjs从前端上传文件.后端是Flask python.我收到响应代码400.我做错了什么?

I am trying to upload a file from frontend using reactjs. The backend is with Flask python. I am getting response code 400. What I am doing wrong?

前端:

<input type="file" name="file" onChange={this.onChangeFile}/>
<button onClick={this.uploadFile}>
    Upload 
</Button>

uploadFile(e){
    e.preventDefault()
    let f = this.state.fileToBeSent
    let f_name = this.state.fileToBeSent.name
    console.log(f_name)

    let fileReader = new  FileReader()
    fileReader.readAsDataURL(f)
    fileReader.onload = (e) => {

      let toPost = {
        'file_name' : f_name,
        'file_data': e.target.result
      }
      console.log(toPost)
      return axios.post('/api/upload', toPost)
                  .then(res => console.log(res))
                  .catch(err => console.warn(err))
    }

  }

和后端:

@app.route('/api/upload', methods = ['POST'])
def upload_file():
    file = request.files['file']
    print(file)
    return "done"

推荐答案

您可以使用 FormData 来而是发送文件.

You can use FormData to send your file instead.

示例

uploadFile(e) {
  e.preventDefault();
  let file = this.state.fileToBeSent;
  const formData = new FormData();

  formData.append("file", file);

  axios
    .post("/api/upload", formData)
    .then(res => console.log(res))
    .catch(err => console.warn(err));
}

这篇关于用Reactjs和Flask上传文件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！