[Vue.js] 透過 axios 的 ajax 上傳

要在 vue.js 使用 axios 的 ajax 上傳,可以使用以下方法,首先準備一下 html:

<a class="btn btn-primary text-white" @click="submit">送出申請</a>

vue 的 methods 部分像這樣設定

submit() {
let formData = new FormData();
    formData.append('file', this.file);
    axios.post('requestUrl',
        formData,
    {
        headers: {
            'Content-Type': 'multipart/form-data'
        }
    }).then(function (data) {
                    
                }).catch(function () {
                        console.log('FAILURE!!');
                });
            },
    handleFileUpload: function () {
        this.file = this.$refs.file.files[0];
    },

 

接下來後端那邊再處理丟過去的 file 就可以了。