Javascript Fetch 上传文件到 Python Flask-restful

Question

我是 python 和 javascript 的新手，我的任务是创建一个需要上传文件的表单。我需要打后端（flask restful API）。我被告知这是我需要发送请求的方式

requests.post(f"{server}/v1/cand", files={f"{target}_cand": cand_data})

我尝试使用 fetch api 从 javascript 中点击，我得到 201 创建响应，但后端接收的文件是空的。 我不知道我的请求格式是否正确，

 var data = new FormData()
  data.append('files', files[0])
  data.append('name', fileName)
  console.log(data.get('files'))
fetch("http://localhost:5001/v1/cand",{
  method:"POST",
  body: {files:files[0]},
})
.then(function(response){
  return response.json()
})
.then(function(data){
  console.log('success')
  console.log(data)
})

这是在后端接收它的方式

    def post(self):
    cand= []
    for f in request.files:
    //do something

请帮我解决这个问题。

Answer 1

抱歉，不敢相信我错过了显而易见的事情。您不会在请求中发送 FormData 实例。你可能想这样做：

document.querySelector('#fileUpload').addEventListener('change', event => {

  let files = event.target.files
  let fileName = files[0].name
  
  // your code start here
  var data = new FormData()
  data.append('files', files[0]) // maybe it should be '{target}_cand'
  data.append('name', fileName)
  console.log(data.get('files'))

  // let url = "http://localhost:5001/v1/cand"
  let url = "https://tongsampah.herokuapp.com"
  fetch(url,{
    method:"POST",
    // body: {files:files[0]}, // wrong
    body: data,
  })
  .then(function(response){
    return response.json()
  })
  // .then(function(data){ // use different name to avoid confusion
  .then(function(res){
    console.log('success')
    console.log(res)
  })

})

<input type="file" id="fileUpload" />

https://tongsampah.herokuapp.com 只是一个我用来测试的虚拟 api 服务器。它将请求详细信息作为响应返回

您可能需要确保字段名称正确（例如{target}_cand -- 我不知道目标值是什么）