Vue vant-ui使用van-uploader实现头像图片上传

效果图：

项目中是使用有赞vant-ui框架实现的头像上传替换功能

代码布局结构： 

<van-row class="sendInfo"><van-col span="24" class="flex colorf topInfo p20"><!--左边头像部分--><van-uploader :after-read="afterCard" :before-read="beforeRead"  accept="image/*" class="arrart":max-size="10240 * 1024" @oversize="onOversize"><img class="arrart":src=" centerInfo.iconUrl ? $baseImgUrl + centerInfo.iconUrl : require('../../assets/img/touciang.png')" /><!-- <van-tag type="danger" class="vip" size="medium">VIP</van-tag> --><div class="personCompany">{{loginType==0?"个人用户":"企业用户"}}</div></van-uploader><!--右边部分--><div class="ml30"><div class="flex rightVip"><span class="fontSize36 color0 mt20 van-ellipsis">郝先生</span><img :src="vipImg" width="46" height="20" class="mt20" style="padding-left:12px;" v-show="centerInfo.memberLevel==1" /></div><div class="flex mt30"><van-icon class="editIcon vmd mr10" color="#999" name="edit" /><div class="fontSize30 color9 personInfo van-multi-ellipsis--l2">优质船主</div></div></div></van-col>
</van-row>

样式：

.flex {display: flex;width: 100%;
}
.topInfo {align-items: center;background-color: #fff;// border-radius: 24px;
}
.arrart {width: 128px;height: 128px;border-radius: 50%;
}
.personCompany {position: absolute;top: 100px;left: 0px;font-size: 0.4rem;width: 128px;height: 40px;text-align: center;background: #333440;border-radius: 50px;color: #ffdd99;// padding:0px 6px;line-height: 40px;
}
.rightVip {width: 552px;align-items: center;
}

主要方法：这里用到了封装的图片压缩封装之后再去上传图片this.$imgUpload.imgZip(）

//定义存储对象
centerInfo: {},

// 限制上传大小图片onOversize(file) {this.$toast("文件大小不能超过 10M");},// 上传之前的图片验证beforeRead(file) {if (this.$utils.isImage(file.name)) {return true;} else {this.$toast.fail("请上传图片格式");}},// 头像上传  文件上传完毕后会触发 after-read 回调函数，获取到对应的 file 对象。afterCard(file) {this.$imgUpload.imgZip(file).then(resData => {const formData = new FormData();formData.append("file", resData);// 请求接口上传图片到服务器uploadImg(formData).then(res => {if (res.code == 200) {this.centerInfo.iconUrl = res.data;let params = {iconUrl: res.data,id: this.id,loginType: this.loginType};updateMineIconUrl(params).then(resImg => {if (resImg.code == 200) {this.$toast("头像修改成功");} else {this.$toast(res.msg);}}).catch(error => {});} else {this.$toast(res.msg);}});});},

关于图片压缩方法、拍照上传的图片被旋转 90 度问题解决方法 后期会更新上去

Uploader 在部分安卓机型上无法上传图片？

Uploader 采用了 HTML 原生的 <input type="file /> 标签进行上传，能否上传取决于当前系统和浏览器的兼容性。当遇到无法上传的问题时，一般有以下几种情况：

1. 遇到了安卓 App WebView 的兼容性问题，需要在安卓原生代码中进行兼容，可以参考此文章。
2. 图片格式不正确，在当前系统/浏览器中无法识别，比如 webp 或 heic 格式。
3. 其他浏览器兼容性问题。

发文不易，点赞、评论、收藏、关注支持一下呗！