JS判断当前是否平板安卓并是否支持cordova方法的示例代码

需求: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;
        });
    
    },

到此这篇关于JS判断当前是否平板安卓并是否支持cordova方法的文章就介绍到这了,更多相关js判断当前平板安卓内容请搜索自由互联以前的文章或继续浏览下面的相关文章希望大家以后多多支持自由互联！