Cách đăng tệp từ biểu mẫu với Axios

Sử dụng HTML thô khi tôi đăng tệp lên máy chủ bình bằng cách sử dụng như sau, tôi có thể truy cập tệp từ yêu cầu bình toàn cầu:

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

Trong bình:

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

Khi tôi cố gắng làm điều tương tự với Axios, toàn cầu yêu cầu bình bị trống:

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

Nếu tôi sử dụng cùng một hàm uploadFile ở trên nhưng xóa tiêu đề json khỏi phương thức axios.post, tôi sẽ nhận được trong khóa biểu mẫu của đối tượng yêu cầu bình của mình một danh sách csv gồm các giá trị chuỗi (tệp là .csv).

Làm cách nào để nhận một đối tượng tệp được gửi qua axios?

Thêm tệp vào một formDatađối tượng và đặt Content-Typetiêu đề thành 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'
    }
})

Ứng dụng mẫu sử dụng Vue. Yêu cầu một máy chủ phụ trợ chạy trên localhost để xử lý yêu cầu:

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

Điều này làm việc cho tôi, tôi hy vọng sẽ giúp được ai đó.

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