微信H5页面图片上传避坑指南（vant+vue）

公司H5项目涉及图片上传，需要在移动端和微信浏览器内部实现上传，浏览器没啥难度，然后微信踩坑。。。

图片上传的坑

首先，一如既往的获取上传文件的参数信息，这里采用formdata数据上传到自家服务器，浏览器没什么问题，能跑通，然后微信浏览器访问不到，报500

使用了vant组件和vue架构

//结构代码
<!-- 图片上传表单项 -->
          <div class="img-box">
            <div class="add-img-title">请上传照片</div>
            <van-uploader
              id="imgUpload"
              v-model="item.value"
              multiple
              preview-image
              preview-full-image
              :data-url="index"
              @delete="deleteImg"
              :after-read="afterRead"
            >
              <div class="img-upload-box">
                <van-icon name="photograph" />
              </div>
            </van-uploader>
            <div class="add-img-subtitle">
              请上传有关病情的照片，照片仅自己和医生可见
            </div>
          </div>
 
//js代码
	  let that = this;
	  // 此时可以自行将文件上传至服务器
      const forms = new FormData();
      //这里的file表示给后台传的属性名字，这里看接口文档需要传的的属性
      forms.append("file", file.file); // 将上传图片信息放进formdata数据中
      // forms.append("type", "TREAT_IMAGES");
      let type = "TREAT_IMAGES";
      axios
        .post(
          "上传目标服务器域名",
          forms,
          type,
          {
          	//设置请求头信息
            headers: {
              "content-type": "multipart/form-data",
              Authorization: $store.getters.userToken
            }
          }
        )
        .then(res => {
          //do some 上传成功
        })
        .catch(err => {
		  //上传失败
		});

这套逻辑在移动端浏览器莫得问题，结果微信拉闸，查阅一番之后才发现微信环境下要调用微信的接口上传到微信云端后，后台再根据前端传来的图片id去下载。。。真是大写无语。相关微信文档：传送门

解决方法

一、采用微信sdk接口

优点：微信环境下没有兼容问题，简单快速
缺点：只能在微信浏览器下使用，需要判断当前页面环境，微信中浏览器和移动端浏览器上传操作需要两套逻辑

//图片上传页面结构
<!-- 微信图片上传测试项 -->
        <!-- <div class="img-box">
          <div class="add-img-title">请上传照片</div>
		  <template v-for="(item,index) in arrUploadImgs">
			  <img class="img-upload-box" :src="item.url" ></img>
		  </template>
          <div class="img-upload-box" @click="changeImg">
            <van-icon name="photograph" />
          </div>
          <div class="add-img-subtitle">
            请上传有关病情的照片，照片仅自己和医生可见
          </div>
        </div> -->
//js代码
changeImg(e) {
      let that = this;
      // 微信接口
      wx.chooseImage({
        count: 9, // 默认9
        sizeType: ["original", "compressed"], // 可以指定是原图还是压缩图，默认二者都有
        sourceType: ["album", "camera"], // 可以指定来源是相册还是相机，默认二者都有
        success(res) {
          const localId = res.localIds[0];
		  // 获取本地图片接口
          // wx.getLocalImgData({
          //   localId, // 图片的localID
          //   success: function(res) {
          //     var localData = res.localData; // localData是图片的base64数据，可以用 img 标签显示
          //     that.arrUploadImgs.push(localData);
          //   }
          // });
          //选择图片成功，上传到微信图片服务器
          wx.uploadImage({
            localId, // 需要上传的图片的本地ID，由chooseImage接口获得
            isShowProgressTips: 1, // 默认为1，显示进度提示
            success(res) {
              let imgId = res.serverId;
			  //下载已上传图片接口
              /*wx.downloadImage({
                serverId: imgId, // 需要下载的图片的服务器端ID，由 uploadImage 接口获得
                isShowProgressTips: 1, // 默认为1，显示进度提示
                success: function(res) {
                  alert("下载成功");
                  var localId = res.localId; // 返回图片下载后的本地ID
                }
              });*/
            }
          });
        }
      });
    },
//实际上在wx.uploadImage之后我们只需要把图片的serverId传送给后端让后端去获取就可以

二、采用base64格式上传

最终自己采用了base64格式上传解决，可以兼容微信和浏览器的环境

<!-- 图片上传表单项 -->
          <div class="img-box">
            <div class="add-img-title">请上传照片</div>
            <van-uploader
              id="imgUpload"
              v-model="item.value"
              multiple
              preview-image
              preview-full-image
              :data-url="index"
              @delete="deleteImg"
              :after-read="afterRead"
            >
              <div class="img-upload-box">
                <van-icon name="photograph" />
              </div>
            </van-uploader>
            <div class="add-img-subtitle">
              请上传有关病情的照片，照片仅自己和医生可见
            </div>
          </div>
//js代码
afterRead(file) {
      let that = this;
      // 获取上传文件type类型
      let index = file.file.type.indexOf("/");
      let type = file.file.type.substr(index + 1, file.file.type.length);
      //入参
      let param = {
        base64Str: file.content,
        fileType: type,
        saveType: "TREAT_IMAGES"
      };
      //接口上传
      postUploadFileBase64(param)
        .then(res => {
          //do some
        })
        .catch(err => {
          //do some
        });
    },

目前看来是问题解决了，不知道还有没有更优雅的方法，如果有大佬知道欢迎评论区交流，非常感谢！

样式格式

.img-box {
  padding: 12px 15px;
  background-color: #fff;
}
.add-img-title {
  font-size: 14px;
  color: #646566;
  margin-bottom: 15px;
}
.add-img-subtitle {
  margin-top: 7px;
  color: #323233;
  font-size: 12px;
}
.img-upload-box {
  position: relative;
  height: 80px !important;
  width: 80px !important;
  line-height: 80px !important;
  text-align: center !important;
  background-color: #f9f9f9 !important;
}