Vue vant-ui使用van-uploader实现头像上传功能

效果图：

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

代码布局结构： 

        
          
          
              
              
              
              
{{loginType==0?"个人用户":"企业用户"}}
          
 
          
          

            

              
              郝先生
              
            
            

              
              

                优质船主
              
            
          
        

样式：

.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 原生的 文末扩展知识点。

图片格式不正确，在当前系统/浏览器中无法识别，比如 webp 或 heic 格式。

其他浏览器兼容性问题。

扩展知识点：安卓10访问手机相册 有读写权限但是还是访问不到问题解决方案

安卓10访问手机相册 有读写权限但是还是访问不到问题解决方案

原因 安卓10 或者是打包target版本大于等于29的时候。就算有读写sd卡权限，谷歌依旧有限制。

解决方案1：

把target版本调整到 29以下

解决方案2：

修改androidmanifest.xml文件 在 android:requestLegacyExternalStorage=“true”

至于为什么target : 29以下可以呢 是因为谷歌默认29以下的 这个属性自动为true
到29开始就要手动填。 坑爹的谷歌！！！

到此这篇关于Vue vant-ui使用van-uploader实现头像图片上传的文章就介绍到这了,更多相关Vue 图片上传内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！