[javascript] 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를 통해 파일 객체를 보내려면 어떻게해야합니까?

답변

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

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

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