Vue+axios上传文件

转载于 2019-04-03 16:53:40 发布 · 313 阅读

文章标签：

本文介绍了一种使用Vue.js实现的表单文件上传方法。通过HTML表单元素选择文件并将其与表单数据一起提交到服务器。示例中包含了获取文件及提交表单的具体实现代码。

以Form表单形式上传文件

 <input type="file" @change="getFile($event)">
 <button @click="submitForm($event)">提交</button>

metods: {
	getFile (event) {
		this.file = event.target.files[0];
	},
	submitForm (event) {
			event.preventDefault();
			
            let formData = new FormData();
            formData.append('name', this.name);
            formData.append('age', this.age);
            formData.append('file', this.file);
			
			let config = {
              headers: {
                'Content-Type': 'multipart/form-data'
              }
            }
	
		   this.$http.post(url,formData,config).then( res => {
					console.log(res)
			} )

	}
}

原文：https://blog.youkuaiyun.com/h363659487/article/details/79035388