快捷導(dǎo)航

JS判斷當(dāng)前是否平板安卓并是否支持cordova方法的示例代碼

更新時(shí)間：2022年08月23日 10:13:02 作者：周家大小姐.

這篇文章主要介紹了JS判斷當(dāng)前是否平板安卓并是否支持cordova方法,pc和安卓平板共用一套代碼,平板的代碼用了cordova做了一個(gè)殼子嵌套如果用了cordova就不支持elementUI中的上傳功能，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，需要的朋友可以參考下

需求:pc和安卓平板共用一套代碼,平板的代碼用了cordova做了一個(gè)殼子嵌套如果用了cordova就不支持elementUI中的上傳功能,所以要用判斷,現(xiàn)用戶在平板又會(huì)用瀏覽器打開(kāi)項(xiàng)目所以要做兩層判斷

app內(nèi)是用cordova中的 window.actionSheet方法調(diào)用上傳讀取相機(jī)和圖庫(kù)方法

上代碼

<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計(jì)算屬性

  computed: {
    // 判斷是否安卓APP中打開(kāi)應(yīng)用還是瀏覽器
    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(["拍照", "相冊(cè)"]).then(index => {
        that.cameraGetPicture(index, arrIndex);
      });
    },
    // 拍照或相冊(cè)選擇
    cameraGetPicture(data, arrIndex) {
      // data == 2 為相冊(cè)
      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;
        });
    
    },

到此這篇關(guān)于JS判斷當(dāng)前是否平板安卓并是否支持cordova方法的文章就介紹到這了,更多相關(guān)js判斷當(dāng)前平板安卓?jī)?nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: