上传图片使用vant

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

---

二、使用步骤

1.引入库

代码如下（示例）：

<div :class="{ xcPicture: true, flexBox: imgUrl.length >= 1 }">
      <div class="picItem">
        <div class="xcItemT">图片</div>
        <div class="xcItemB">
          <div class="picBox">
            <div class="picImg" v-for="(item, index) in imgUrl" :key="index">
              <div class="del" @click="delPic(index)">
                <img src="../../img/deleBtn.png"/>
              </div>
              <img :src="item" alt=""/>
            </div>
          </div>
          <van-uploader :after-read="afterRead" v-if="!$global.globalFlag && imgUrl.length < 4">
            <van-button class="addPic">
              <i class="addIcon">+</i>
              <p class="addText">添加图片</p>
            </van-button>
          </van-uploader>
          <div @click="afterRead" v-if="imgUrl.length < 4 && $global.globalFlag">
            <van-button class="addPic">
              <i class="addIcon">+</i>
              <p class="addText">添加图片</p>
            </van-button>
          </div>
        </div>
      </div>
    </div>

2.读入数据

代码如下（示例）：

//删除单张图片
    delPic(index) {
      console.log(index,'index409')
      this.imgUrl.splice(index, 1)
    },
    //上传图片
    afterRead(file) {
      // 图片传输过程开启遮罩
      uploadImgs(file).then(_result=>{
        this.imgUrl.push(this.$global.imgUrl + _result.data.link)
      })

      // window.plugins.MaskPlugin.showMask({maskArea: "web"});
      // window.plugins.PicUploadPlugin.show({
      //   storeUrl: this.$global.uploadImgUrl,
      //   mode: 'default',
      //   headers: {
      //     "Authorization": "Basic c2FiZXI6c2FiZXJfc2VjcmV0=",
      //     'User-Type': 'market_pos',
      //     "Blade-Auth": "bearer " + window.localStorage.getItem("usertokenMarket"),
      //   },
      //   success: (_result) => {
      //     // 关闭遮罩
      //     window.plugins.MaskPlugin.unMask();
      //     // console.log("上传成功" + JSON.stringify(JSON.parse(_result).data.content.data.link, null, 2));
      //     this.imgUrl.push(_result.data.link)
      //   },
      //   error: (_ex) => {
      //     // 关闭遮罩
      //     window.plugins.MaskPlugin.unMask();
      //     console.log("上传失败" + _ex)
      //   }
      // });

      // let formData = new FormData();
      // formData.append("file", file.file);
      // upload(formData).then((res) => {
      //   console.log(res);
      //   this.imgUrl.push(res.data.data.link);
      //   console.log(this.imgUrl)
      // })
    },

该处使用的url网络请求的数据。

---

总结