返回顶部
首页 > 资讯 > 前端开发 > JavaScript >JS判断当前是否平板安卓并是否支持cordova方法的示例代码
  • 420
分享到

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

2024-04-02 19:04:59 420人浏览 泡泡鱼
摘要

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

需求: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判断当前平板安卓内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网!

--结束END--

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

本文链接: https://lsjlt.com/news/165730.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

猜你喜欢
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作