单图上传（例如上传头像）：
<van-uploader :before-read="beforeRead" :after-read="afterRead" :preview-full-image="false" :deletable="false">
<pk-img
round
:src="tempFilePath"
width="60px"
height="60px">
</pk-img>
</van-uploader>
Js：
// 返回布尔值
beforeRead(file) {
if (file.type !== 'image/jpeg') {
this.$toast({
message:"请上传 jpg 格式图片"
});
return false;
}
return true;
},
afterRead(file) {
/*
注意：当选择一张图片时，file是一个对象不是数组！！
*/
//构造一个 FormData，把后台需要发送的参数添加
// 接口需要传的参数
//将formDate文件上传到服务器，会返回图片地址imgUrl
let formData=new FormData();
formData.append('file', file.file);
this.$api.image(formData).then(res => {
let imgUrl=this.$resData(res);
if(imgUrl){
this.tempFilePath=imgUrl;
this.$api.modHeadPortrait({
headPortrait:imgUrl
}).then(res=>{
if(res.status===200){
this.getUserInfo();
this.$toast({
message:"修改头像成功"
})
}else{
this.$toast({
message:"修改头像失败"
})
}
})
}else{
this.$toast({
message:"网络请求失败"
})
}
});
},
多图上传：
<van-uploader v-model="picList" :multiple="true" :after-read="afterRead" :max-count="5">
<div class="d-flex-pk ">
<div class="upLoadImg position-relative">
<div class="imgDr">
<img src="../../../assets/images/camera.png" alt="" width="25" height="20">
</div>
<div class="upImg text-main-pk">上传图片</div>
</div>
</div>
</van-uploader>
Js：
const formData=new FormData();
//将formData放在外面，避免每次选择图片都初始化。
return {
picList: [],
formData:formData,
}
methods:{
afterRead(file) {
this.$toast.loading();
for (let i = 0; i < file.length; i++) {
//'files'：后台接收的参数
this.formData.append('files', file[i].file);
//此时可以上传图片到服务器
}
//若要进行删除图片列表中的图片操作，则先获取到图片数组，将下面这部到提交的时候再执行
//api接口:images
this.$api.images(this.formData).then(res=>{
this.$toast.clear()
let result=this.$resData(res)
if(result) {
this.picList = result;
}else{
this.$toast({
message:"上传图片失败"
})
return
}
})
},
}
网友评论