Ajax从Axios的表单中发布文件 [英] Ajax post a file from a form with Axios

问题描述

使用原始.html当我发布一个文件到一个烧瓶服务器使用以下我可以访问烧瓶请求全球文件：

 < form id =uploadFormaction ='upload_file'role =formmethod =postenctype = multipart / form-data> 
< input type =fileid =filename =file> 
< input type = submit value =上传> 
< / form> 
  

在烧瓶中：

  def post（self）：
如果request.files中有'file'：
 .... 
  

当我试图用Axios做同样的事情时，请求全局变为空：

 < form id =uploadFormenctype =multipart / form-datav-on：change =uploadFile> 
< input type =fileid =filename =file> 
< / form> 
 $ b uploadFile：function（event）{
 const file = event.target.files [0] 
 axios.post（'upload_file'，file，{
 headers ：{
'Content-Type'：'multipart / form-data'
} 
}）
} 
  

如果我使用上面的同样的uploadFile函数，但是从axios.post方法中删除标头json我得到我的瓶子请求对象的表单密钥一个csv字符串值列表（文件是一个.csv）。如何获取通过axios发送的文件对象？使用 formData 使用

解决方案>发布文件

  var formData = new FormData（）; 
 var imagefile = document.querySelector（'＃file'）; 
 formData.append（image，imagefile.files [0]）; 
 axios.post（'upload_file'，formData，{
 headers：{
'Content-Type'：'multipart / form-data'
} 
}） 
  

Using raw .html when I post a file to a flask server using the following I can access files from the flask request global:

<form id="uploadForm" action='upload_file' role="form" method="post" enctype=multipart/form-data>
    <input type="file" id="file" name="file">
    <input type=submit value=Upload>
</form>

In flask:

def post(self):
    if 'file' in request.files:
        ....

When I try to do the same with Axios the flask request global is empty:

<form id="uploadForm" enctype="multipart/form-data" v-on:change="uploadFile">
<input type="file" id="file" name="file">
</form>

uploadFile: function (event) {
    const file = event.target.files[0]
    axios.post('upload_file', file, {
        headers: {
          'Content-Type': 'multipart/form-data'
        }
    })
}

If I use the same uploadFile function above but remove the headers json from the axios.post method I get in the form key of my flask request object a csv list of string values (file is a .csv). How can I get a file object sent via axios?

解决方案

Use formData to post file

var formData = new FormData();
var imagefile = document.querySelector('#file');
formData.append("image", imagefile.files[0]);
axios.post('upload_file', formData, {
    headers: {
      'Content-Type': 'multipart/form-data'
    }
})

这篇关于Ajax从Axios的表单中发布文件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！