如何使用Axios从表单发布文件


127

当我使用以下命令将文件发布到烧瓶服务器时,使用原始HTML可以从烧瓶请求全局访问文件:

<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>

在烧瓶中:

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

当我尝试对Axios执行相同操作时,烧瓶请求全局为空:

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

如果我使用上面相同的uploadFile函数,但从axios.post方法中删除标头json,则会在flask请求对象的表单密钥中获得一个csv字符串值列表(文件为.csv)。

如何获取通过axios发送的文件对象?


@Niklesh是的错别字剪切和粘贴,我在上面进行了修复,在代码中包含双引号。
唐·史密斯

您是否尝试过v-on:change="uploadFile"使用input而不是form标签?
Niklesh Raut

@Niklesh我得到相同的结果-数据以字符串形式发送并由request.form而不是烧瓶中的request.files拾取。
唐·史密斯

Answers:


267

将文件添加到formData对象,并将Content-Type标头设置为multipart/form-data

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

1
发布文件后。我们需要从HTTP请求访问它们还是需要从服务器端的参数访问它们。
Parth Patel's

@ParthPatel:我正在使用$_FILESPHP来获取服务器端的文件
Niklesh Raut

7
感谢您的这篇文章,但我仍然不明白为什么需要FormData。根据爱可信的doc,既FileFormData被视为 唯一的浏览器,所以这两种方式可以同样看到(github.com/axios/axios#request-config
弘树

太棒了!我正在发送“ data:{data:formData}”,它生成错误412。它与data:formData
Aseem,

3
注意:在浏览器的上下文中运行时,该片段按原样工作。要在node.js中运行,需要传递由计算得出的标头formData.getHeaders()。参见https://github.com/axios/axios/issues/789
-mjv

12

使用Vue的示例应用程序。需要在本地主机上运行的后端服务器来处理请求:

var app = new Vue({
  el: "#app",
  data: {
    file: ''
  },
  methods: {
    submitFile() {
      let formData = new FormData();
      formData.append('file', this.file);
      console.log('>> formData >> ', formData);

      // You should have a server side REST API 
      axios.post('http://localhost:8080/restapi/fileupload',
          formData, {
            headers: {
              'Content-Type': 'multipart/form-data'
            }
          }
        ).then(function () {
          console.log('SUCCESS!!');
        })
        .catch(function () {
          console.log('FAILURE!!');
        });
    },
    handleFileUpload() {
      this.file = this.$refs.file.files[0];
      console.log('>>>> 1st element in files array >>>> ', this.file);
    }
  }
});

https://codepen.io/pmarimuthu/pen/MqqaOE


我可以请您在这里查看与axios相关的问题: stackoverflow.com/questions/59470085/…吗?
Istiaque Ahmed

5

这对我有用,希望对某人有帮助。

var frm = $('#frm');
let formData = new FormData(frm[0]);
axios.post('your-url', formData)
    .then(res => {
        console.log({res});
    }).catch(err => {
        console.error({err});
    });

使用Nuxt-这终于对我有用。headers: { 'Content-Type': 'multipart/form-data' }从选项获得服务器响应后,删除是实际发送帖子的唯一方法。我可能做错了什么,但它正在起作用,我就别管它了
杰夫·布鲁梅尔

这太棒了!我从未想到您可以发送整个表格。谢谢!
Dara Java
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.