<script src="https://cdn.staticfile.org/vue-resource/1.5.1/vue-resource.min.js"></script>
单独上传文件:
<input class="file" name="file" type="file" accept="image/png,image/gif,image/jpeg" @change="update"/>
methods: { update(e){ let file = e.target.files[0]; let param = new FormData(); //创建form对象 param.append('file',file);//通过append向form对象添加数据 console.log(param.get('file')); //FormData私有类对象,访问不到,可以通过get判断值是否传进去 let config = { headers:{'Content-Type':'multipart/form-data'} }; //添加请求头 this.$http.post('http://127.0.0.1:8081/upload',param,config) .then(response=>{ console.log(response.data); }) } }
Form表单上传文件:
<form> <input type="text" value="" v-model="name" placeholder="请输入用户名"> <input type="text" value="" v-model="age" placeholder="请输入年龄"> <input type="file" @change="getFile($event)"> <button @click="submitForm($event)">提交</button> </form>
data: { name: '', age: '', file: '' }, methods: { getFile(event) { this.file = event.target.files[0]; console.log(this.file); }, 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('http://127.0.0.1:8081/upload', formData, config).then(function (response) { if (response.status === 200) { console.log(response.data); } }) } }