vue项目中使用axios上传图片等文件

form表单提交图片会刷新页面，也可以时form绑定到一个隐藏的iframe上，可以实现无刷新提交数据。

html代码：

<input name="file" type="file" accept="image/png,image/gif,image/jpeg" @change="update"/>

js代码：

import axios from 'axios'

// 添加请求头

update (e) {// 上传照片

var self = this

let file = e.target.files[0]

let param = new FormData() // 创建form对象

param.append('file', file) // 通过append向form对象添加数据

param.append('chunk', '0') // 添加form表单中其他数据

console.log(param.get('file')) // FormData私有类对象，访问不到，可以通过get判断值是否传进去

let config = { headers: {'Content-Type': 'multipart/form-data'} }

// 添加请求头

axios.post('http://172.19.26.60:8081/rest/user/headurl', param, config)

.then(response => { if (response.data.code === 0) { self.ImgUrl = response.data.data }

console.log(response.data)

        })
    }