Axios를 사용하여 양식에서 파일을 게시하는 방법

다음을 사용하여 플라스크 서버에 파일을 게시 할 때 원시 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를 통해 파일 객체를 보내려면 어떻게해야합니까?

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

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