วิธีโพสต์ไฟล์จากแบบฟอร์มด้วย Axios

การใช้ HTML ดิบเมื่อฉันโพสต์ไฟล์ไปยังเซิร์ฟเวอร์ flask โดยใช้สิ่งต่อไปนี้ฉันสามารถเข้าถึงไฟล์จากคำขอ flask 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>

ในขวด:

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

เมื่อฉันพยายามทำเช่นเดียวกันกับ Axios คำขอ flask global ว่างเปล่า:

<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 เดียวกันด้านบน แต่ลบส่วนหัว json ออกจากเมธอด axios.post ฉันจะได้รับคีย์ฟอร์มของอ็อบเจ็กต์คำขอขวดของฉันรายการ csv ของค่าสตริง (ไฟล์คือ. csv)

ฉันจะรับออบเจ็กต์ไฟล์ที่ส่งผ่าน axios ได้อย่างไร

เพิ่มไฟล์ไปยังformDataวัตถุและการตั้งค่าส่วนหัวContent-Typemultipart/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'
    }
})

ตัวอย่างแอปพลิเคชันโดยใช้ Vue ต้องใช้เซิร์ฟเวอร์แบ็กเอนด์ที่รันบน localhost เพื่อดำเนินการตามคำขอ:

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

สิ่งนี้ได้ผลสำหรับฉันฉันหวังว่าจะช่วยให้ใครบางคน

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