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

Question

当我使用以下内容将文件发布到烧瓶服务器时使用原始 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，我会在我的烧瓶请求对象的表单键中获得一个字符串值的 csv 列表（文件是 .csv）。

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

原文由 Don Smythe 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

将文件添加到 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'
 }
 })

原文由 Niklesh Raut 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

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

原文由 maris 发布，翻译遵循 CC BY-SA 4.0 许可协议