解决input上传照片问题

最近h5使用input上传照片出现了多种问题

一、强制刷新
有客户反馈点击上传图片时候， 页面强制刷新导致数据丢失问题， 虽然这边测试没有复现出来， 但网上已经有说明情况了， 部分安卓机和苹果机运行内存不足的时候， 会强制刷新页面， 当前解决方案是清除后台缓存

二、部分安卓上传多张照片没有反应
有客户反馈上传多张照片没有反应，刚开始我的解决方案是只允许安卓单张上传， 不过多久客户又投诉单张上传很麻烦

所以input上传照片还是存在隐患， 需要另找方法解决

使用微信sdk
微信页面开发

根据流程js-sdk配置好后

// 微信环境上传
    chooseWxImg() {
      wx.chooseImage({
        count: 9, // 默认9
        sizeType: ["compressed"], // 可以指定是原图还是压缩图，默认二者都有
        // sourceType: ['camera'], // 可以指定来源是相册还是相机，默认二者都有
        success: res => {
          let locaIds = res.localIds; // 返回选定照片的本地ID列表，localId可以作为img的src属性显示图片,但IOS WKWebview 不支持 localId 直接显示图片
          this.syncUpload(locaIds);
        },
        fail() {
          console.log('wx upload fail')
        }
      });
    },
    syncUpload(localIds) {
      // 移除数组最后一项 遍历效果
      var localId = localIds.pop();
      let self = this;
      wx.getLocalImgData({
        localId: localId, // 图片的localID
        success: function (resBackData) {
          var localData = resBackData.localData;
          // 判断是否有这样的头部
          // alert('获取base64图片成功')
          if (localData.indexOf("data:image") != 0) {
            // 安卓处理
            localData = "data:image/jpeg;base64," + localData;
          }
          // localData是经过处理的base64编码的图片
          localData = localData
            .replace(/\r|\n/g, "")
            .replace("data:image/jgp", "data:image/jpeg");
          //保存base64数组用作展示
          // 拿到base64，转文件流用作提交接口
          self.getBase(localData);

          if (localIds.length > 0) {
            self.syncUpload(localIds);
          }
        },
      });
    },
    imgWxUpload(data) {
         //上传成功
    },
    async getBase(base) {
      let _this = this;
      let newFormData = new FormData();
      const photoName = `${new Date().getTime()}`;
      let initData = base.replace(/%0A|\s/g, "");
      let file = _this.base64ToFile(initData, `${photoName}.jpg`);
      let rst = null;
      let blob = null;
      if (file.size / 1024 > 500) {
        try {
          rst = await lrz(file);
          // alert('压缩了', )
          if (this.$utils.checkDevice("isIOS")) {
            blob = await this.$utils.dataURLtoBlob(rst.base64);
            newFormData.append("file", this.$utils.blobToFile(blob, file.name));
          } else {
            newFormData.append(
              "file",
              this.$utils.convertBase64UrlToFile(rst.base64, file.name)
            );
          }
        } catch (e) {
           // 上传失败
        }
      } else {
        newFormData.append("file", file);
      }
      // newFormData.append("file", p);
   
      this.$ApiPost('接口', {
        type: "formData",
        file: newFormData
      }).then((res) => {
           // 获取图片地址
        })
        .catch((e) => {
        });
    },
    /* base64转文件流方法 */
    base64ToFile(base64Data, filename = "") {
      var arr = base64Data.split(","),
        mime = arr[0].match(/:(.*?);/)[1],
        type = arr[0].match(/:(.*?);/)[1],
        fileExt = mime.split("/")[1],
        bstr = atob(arr[1]),
        n = bstr.length,
        u8arr = new Uint8Array(n);
      while (n--) {
        u8arr[n] = bstr.charCodeAt(n);
      }
      return new File([u8arr], filename, { type: type });
    }
  },

以上代码提供思路