快捷導(dǎo)航

Vue?vant-ui使用van-uploader實(shí)現(xiàn)頭像上傳功能

更新時(shí)間：2022年05月21日 10:15:57 作者：船長(zhǎng)在船上

這篇文章主要介紹了Vue?vant-ui使用van-uploader實(shí)現(xiàn)頭像圖片上傳,項(xiàng)目中是使用有贊vant-ui框架實(shí)現(xiàn)的頭像上傳替換功能，用到了封裝的圖片壓縮封裝之后再去上傳圖片this.$imgUpload.imgZip(），本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，需要的朋友參考下吧

效果圖：

項(xiàng)目中是使用有贊vant-ui框架實(shí)現(xiàn)的頭像上傳替換功能

代碼布局結(jié)構(gòu)：

<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?"個(gè)人用戶":"企業(yè)用戶"}}</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">
                優(yōu)質(zhì)船主
              </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()

//定義存儲(chǔ)對(duì)象
centerInfo: {},

// 限制上傳大小圖片
    onOversize(file) {
      this.$toast("文件大小不能超過(guò) 10M");
    },
    // 上傳之前的圖片驗(yàn)證
    beforeRead(file) {
      if (this.$utils.isImage(file.name)) {
        return true;
      } else {
        this.$toast.fail("請(qǐng)上傳圖片格式");
      }
    },
    // 頭像上傳  文件上傳完畢后會(huì)觸發(fā) after-read 回調(diào)函數(shù)，獲取到對(duì)應(yīng)的 file 對(duì)象。
    afterCard(file) {
 
      this.$imgUpload.imgZip(file).then(resData => {
        const formData = new FormData();
        formData.append("file", resData);
 
        // 請(qǐng)求接口上傳圖片到服務(wù)器
        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);
          }
        });
      });
    },

關(guān)于圖片壓縮方法、拍照上傳的圖片被旋轉(zhuǎn) 90 度問(wèn)題解決方法后期會(huì)更新上去

Uploader 在部分安卓機(jī)型上無(wú)法上傳圖片？

Uploader 采用了 HTML 原生的 <input type="file /> 標(biāo)簽進(jìn)行上傳，能否上傳取決于當(dāng)前系統(tǒng)和瀏覽器的兼容性。當(dāng)遇到無(wú)法上傳的問(wèn)題時(shí)，一般有以下幾種情況：

遇到了安卓 App WebView 的兼容性問(wèn)題，需要在安卓原生代碼中進(jìn)行兼容，可以參考文末擴(kuò)展知識(shí)點(diǎn)。
圖片格式不正確，在當(dāng)前系統(tǒng)/瀏覽器中無(wú)法識(shí)別，比如 webp 或 heic 格式。
其他瀏覽器兼容性問(wèn)題。

擴(kuò)展知識(shí)點(diǎn)：安卓10訪問(wèn)手機(jī)相冊(cè) 有讀寫權(quán)限但是還是訪問(wèn)不到問(wèn)題解決方案

安卓10訪問(wèn)手機(jī)相冊(cè) 有讀寫權(quán)限但是還是訪問(wèn)不到問(wèn)題解決方案

原因安卓10 或者是打包target版本大于等于29的時(shí)候。就算有讀寫sd卡權(quán)限，谷歌依舊有限制。

解決方案1：

把target版本調(diào)整到 29以下

解決方案2：

修改androidmanifest.xml文件在 <application 標(biāo)簽里再添加一個(gè)屬性
android:requestLegacyExternalStorage=“true”

至于為什么target : 29以下可以呢是因?yàn)楣雀枘J(rèn)29以下的這個(gè)屬性自動(dòng)為true
到29開始就要手動(dòng)填。坑爹的谷歌?。?！

到此這篇關(guān)于Vue vant-ui使用van-uploader實(shí)現(xiàn)頭像圖片上傳的文章就介紹到這了,更多相關(guān)Vue 圖片上傳內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: