首页 > 解决方案 > 使用 VueJS 和 Axios 上传文件

问题描述

我需要将文件上传到“/assets/img”文件夹中的服务器。我编写了以下代码,如示例中所示:

<div class="form-group">
    <label>File
        <input class="form-control" type="file" id="file" ref="file" 
            v-on:change="handleFileUpload($event)"
        />
    </label>
    <button v-on:click="submitFile($event)">Submit File</button>
</div>


data: function(){
    return {
        file: '',
    }
},
methods: {
    handleFileUpload: function($event){
        this.file = this.$refs.file.files[0];
        console.log(this.file);
    },
    submitFile: function($event){
        var formData = new FormData();
        formData.append('file', this.file);

        axios.post( 'http://uquest.name/assets/img',
            formData,
            {
                headers: {
                    'Content-Type': 'multipart/form-data'
                }
            }
        ).then(function(){
            console.log('SUCCESS!!');
        })
        .catch(function(){
            console.log('FAILURE!!');
        });

        this.files = '';
    }
}

但是下载的文件没有出现在“/assets/img”文件夹中。我究竟做错了什么?

标签: filevue.jsfile-uploadvuejs2axios

解决方案


推荐阅读