js判断当前平板安卓

时间:2022-09-29 周家大小姐. 人气:0

需求:pc和安卓平板共用一套代码,平板的代码用了cordova做了一个壳子嵌套如果用了cordova就不支持elementUI中的上传功能,所以要用判断,现用户在平板又会用浏览器打开项目所以要做两层判断

app内是用cordova中的 window.actionSheet方法调用上传读取相机和图库方法

上代码

<el-upload
                      class="avatar-uploader repost-pic-upload"
                      ref="uploadImgRef"
                      action=""
                      :accept="fileType"
                      :disabled="isAndroid"
                      :show-file-list="false"
                      :on-preview="picPreview"
                      :http-request="
                        file => {
                          beforeUpload(file, index);
                          return false;
                        }
                      "
                      :before-remove="
                        (file, fileList) => {
                          handleRemove(file, fileList, index);
                          return false;
                        }
                      "
                    >
                      <div
                        v-if="uploadFlag"
                        class="progress-wrap"
                        @click.stop="handleCancelUpload"
                      >
                        <p class="progress-rate">{{ uploadPercent }}%</p>
                        <p class="progress-cancel">取消上传</p>
                      </div>
                      <img
                        v-else-if="item.dstImageData"
                        :src="item.dstImageData"
                        class="avatar"
                      />
                      <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                      <div
                        class="android-wrap"
                        v-if="isAndroid"
                        @click="selectPhotoSheet(index)"
                      ></div>
                    </el-upload>

computed计算属性

  computed: {
    // 判断是否安卓APP中打开应用还是浏览器
    isAndroid() {
      if (
        /(iPhone|iPad|iPod|iOS|Android)/i.test(navigator.userAgent) &&
        typeof window.actionSheet == "function"
      ) {
        return true;
      } else {
        return false;
      }
    }
  },

安卓方法

  // 选择图片弹窗按钮
    selectPhotoSheet(arrIndex) {
      let that = this;
      window.actionSheet(["拍照", "相册"]).then(index => {
        that.cameraGetPicture(index, arrIndex);
      });
    },
    // 拍照或相册选择
    cameraGetPicture(data, arrIndex) {
      // data == 2 为相册
      window
        .cameraGetPicture(data)
        .then(base64 => {
          console.log(base64);
          this.uploadImg(arrIndex, base64);
        })
        .then(err => {
          console.log(err);
        });
    },

PC方法

 // 上传图片
    beforeUpload(file, index) {
      this.uploadFlag = true;
      let picType = file.file.type;
      if (
        !(
          picType == "image/png" ||
          picType == "image/jpg" ||
          picType == "image/jpeg"
        )
      ) {
        this.$message.warning("只能JPG/PNG格式的照片");
        this.list[index].src = "";
        return false;
      }
      if (file.file.size > 2 * 1024 * 1024) {
        this.$message.warning("图片大小不能超多2M");
        return false;
      }
      // let params = new FormData();
      // params.append("file", file.file);
      common.getBase64(file.file).then(base64 => {
        // this.list[index].dstImageData = base64;
        this.uploadImg(index, base64);
      });
 
      this.dialogVisible = true;
      return false;
    },
    // 上传图片
    uploadImg(index, base64) {
      let arr = base64.split(",");
      let params = {
        prefix: arr[0],
        dataString: arr[1]
      };
 
      let CancelToken = axios.CancelToken;
      let self = this;
      axios({
        url: this.imgUploadUrlBase,
        method: "post",
        data: params,
        headers: {
          "Content-Type": "application/json;charser=utf-8",
          Authorization: `Bearer${store.state.login.login.access_token}`
        },
        cancelToken: new CancelToken(function executor(c) {
          self.cancel = c;
        }),
        onUploadProgress: progressEvent => {
          this.uploadPercent = Math.round(
            (progressEvent.loaded / progressEvent.total) * 100
          );
        }
      })
        .then(({ data: { data } }) => {
          api
            .getRecognition({
              imgPath: data.filePath
            })
            .then(res => {
              this.list[index].dstImageData = data.filePath;
              this.list[index].nameplateTableJson = res;
              this.$message.success("上传成功");
            });
        })
        .catch(() => {
          this.$message.error("上传失败");
        })
        .finally(() => {
          this.uploadFlag = false;
          this.uploadPercent = 0;
        });
    
    },

加载全部内容