第一种:用vant 中的uploader组件
<van-uploader v-model="fileList" :after-read="afterRead" />
var params= new formData //创建form对象
params.append('data',flie.file) //通过append向form对象添加数据
调取接口
this.$http.post(this.$api.地址,params,{header:{ 'Content-Type': 'multipart/form-data' }}).then(res=>{
if(res.data.code === 0){
this.$toast('上传成功')
}else
{
this.$toast(res.msg)
}
}).catch(err=>{
this.$toast(err)
})
这个是利用vant插件,vant已经把file进行分装,因此可以file.file可以直接获取到后台需要的blob流文件
第二种:用input实现
<input type="file" accept=".img/.png/.jpg" @change="uploadimg" v-modle=“file”>
uploadimg(e){
var f = e.target.files[0] //blob流文件位置
let params = new formdata()
params.apppend('data',f)
let config = {
headers: { 'Content-Type': 'multipart/form-data' }
} //请求头
axios.post(请求地址,params,请求头).then(res=>{
})
}
网友评论