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

Question

使用raw HTML，当我将文件发布到flask服务器时，使用以下方法，我可以从flask请求全局访问文件：

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

<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方法中删除headers json，我将在flask请求对象的form键中获得一个字符串值的csv列表（文件是.csv）。

如何获得通过Axios发送的文件对象？

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