vue.js 附件上传

最新推荐文章于 2024-08-14 15:51:24 发布

九十一℃

最新推荐文章于 2024-08-14 15:51:24 发布

阅读量1.7k

点赞数 1

分类专栏： ajax html vue html5 文章标签： vue.js 附件上传 vue-resource

本文链接：https://blog.csdn.net/purple25/article/details/82864021

版权

html 同时被 3 个专栏收录

11 篇文章 0 订阅

订阅专栏

html5

9 篇文章 0 订阅

订阅专栏

vue

4 篇文章 0 订阅

订阅专栏

1.需要引入vue-resource.js

https://cdn.jsdelivr.net/npm/vue-resource@1.5.1

2.HTML设计如下，文本选择触发change事件进行上传操作。

<form id="form1" name="form1">
    <input type="file" id="dmsFile" name="dmsFile" @change="getFile($event)"/>
</form>

3. JS代码如下

Vue.prototype.$http = axios;
new Vue({
    data:{},
    mounted:{},
    methods:{
        getFile: function(event){
            var _this = this;
            event.preventDefault();
            this.file = event.target.files[0];

            let formData = new FormData("form1");
            //传参使用append
            formData.append('age', 20);
            formData.append('name', '张三');
            formData.append('dmsFile', this.file);
            //post请求 headers 需要加上
            let config = {
                headers: {
                    'Content-Type': 'multipart/form-data'
                }
            }
	
            this.$http.post(url, formData, config)
            .then(function (res) {
                alert("上传成功");
            })
        },
    }
})