在Vue项目中写的demo
ajax提交使用axios
在Vue中file不能像其他input一样使用v-model双向数据绑定,因为文件选择是只读,只能用onchange监控值得变化
创建一个FormData对象,通过append向form对象添加数据。准备好数据后发送ajax请求上传数据
上传文件需要设置请求头’Content-Type’: ‘multipart/form-data’
作者:喵巨人
原文:http://vuepress.wmm66.com/%E5%89%8D%E7%AB%AF%E5%BC%80%E5%8F%91/javascript/Ajax-%E4%B8%8A%E4%BC%A0%E5%9B%BE%E7%89%87.html#%E9%9C%80%E6%B1%82
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。
<input type="file" ref="file" @change="getFile" />
<button @click="uploadFile">上传</button>
getFile (e) {
this.image = e.target.files[0]
},
uploadFile () {
// console.log(this.$refs.file.files)
if (this.image) {
let param = new FormData() // 创建form对象
param.append('image', this.image, this.image.name) // 通过append向form对象添加数据
param.append('id', 47)
axios.post('http://xxx/api/upImage', param, {
headers: {
'Content-Type': 'multipart/form-data',
'usertoken': 'afelagfjlaewgj55feagj3qfasf'
}
}).then(res => {
console.log(res)
})
}
}