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

 更新时间:2022年08月23日 10:13:02   作者:周家大小姐.  
这篇文章主要介绍了JS判断当前是否平板安卓并是否支持cordova方法,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判断当前平板安卓内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • 浅谈Rx响应式编程

    浅谈Rx响应式编程

    在学习Rx编程的过程中,理解Observable这个概念至关重要,常规学习过程中,通常需要进行多次碰壁才能逐渐开悟。这个有点像小时候学骑自行车,必须摔几次才能掌握一样。当然如果有办法能言传,则可以少走一些弯路,尽快领悟Rx的精妙
    2021-06-06
  • JavaScript通过attachEvent和detachEvent方法处理带参数的函数

    JavaScript通过attachEvent和detachEvent方法处理带参数的函数

    通过 attachEvent 和 detachEvent 方法处理带参数的函数(示例代码)
    2010-03-03
  • JavaScript 正则应用详解【模式、欲查、反向引用等】

    JavaScript 正则应用详解【模式、欲查、反向引用等】

    这篇文章主要介绍了JavaScript 正则应用,结合实例形式详细分析了JavaScript 正则表达式模式、欲查、反向引用等相关概念、原理与操作注意事项,需要的朋友可以参考下
    2020-05-05
  • JavaScript设计模式之外观模式实例

    JavaScript设计模式之外观模式实例

    这篇文章主要介绍了JavaScript设计模式之外观模式实例,本文用一些代码实例来讲解JavaScript中的外观模式,需要的朋友可以参考下
    2014-10-10
  • 在Html中使用Requirejs进行模块化开发实例详解

    在Html中使用Requirejs进行模块化开发实例详解

    在前端模块化的时候,不仅仅是js需要进行模块化管理,html有时候也需要模块化管理。这里就介绍下如何通过requirejs,实现html代码的模块化开发
    2016-04-04
  • JavaScript实现异步图像上传功能

    JavaScript实现异步图像上传功能

    这篇文章主要介绍了JavaScript实现异步图像上传功能,本文展示了一种使用代码示例立即显示图像的方法(使用图像的Base64编码版本),同时将其上载到服务器,而无需等待操作完成。需要的朋友可以参考下
    2018-07-07
  • JavaScript学习笔记--常用的互动方法

    JavaScript学习笔记--常用的互动方法

    本文对JavaScript中常用的互动方法进行实例分析介绍,图文并茂,有需要的朋友可以看下
    2016-12-12
  • js操作输入框中选择内容兼容IE及其他主流浏览器

    js操作输入框中选择内容兼容IE及其他主流浏览器

    这篇文章主要介绍了js如何操作输入框中选择的内容兼容IE及其他主流浏览器,需要的朋友可以参考下
    2014-04-04
  • Django 中的templates使用示例详解

    Django 中的templates使用示例详解

    Django模板系统提供了一套丰富的工具集,能够帮助开发者将动态数据有效地渲染到HTML页面中,它通过特殊的语法支持变量插入、逻辑标签和过滤器的使用,本文给大家介绍Django 中的templates使用,感兴趣的朋友一起看看吧
    2024-10-10
  • JavaScript实现手写promise的示例代码

    JavaScript实现手写promise的示例代码

    promise 作为前端开发中常用的函数,解决了 js 处理异步时回调地狱的问题,大家应该也不陌生了,今天来学习一下 promise 的实现过程吧
    2023-04-04

最新评论