经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置:技术经验 » 移动开发 » Cordova » 查看文章
JS判断当前是否平板安卓并是否支持cordova方法的示例代码
来源:jb51  时间:2022/8/23 11:27:08  对本文有异议

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

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

上代码

  1. <el-upload
  2. class="avatar-uploader repost-pic-upload"
  3. ref="uploadImgRef"
  4. action=""
  5. :accept="fileType"
  6. :disabled="isAndroid"
  7. :show-file-list="false"
  8. :on-preview="picPreview"
  9. :http-request="
  10. file => {
  11. beforeUpload(file, index);
  12. return false;
  13. }
  14. "
  15. :before-remove="
  16. (file, fileList) => {
  17. handleRemove(file, fileList, index);
  18. return false;
  19. }
  20. "
  21. >
  22. <div
  23. v-if="uploadFlag"
  24. class="progress-wrap"
  25. @click.stop="handleCancelUpload"
  26. >
  27. <p class="progress-rate">{{ uploadPercent }}%</p>
  28. <p class="progress-cancel">取消上传</p>
  29. </div>
  30. <img
  31. v-else-if="item.dstImageData"
  32. :src="item.dstImageData"
  33. class="avatar"
  34. />
  35. <i v-else class="el-icon-plus avatar-uploader-icon"></i>
  36. <div
  37. class="android-wrap"
  38. v-if="isAndroid"
  39. @click="selectPhotoSheet(index)"
  40. ></div>
  41. </el-upload>

computed计算属性

  1. computed: {
  2. // 判断是否安卓APP中打开应用还是浏览器
  3. isAndroid() {
  4. if (
  5. /(iPhone|iPad|iPod|iOS|Android)/i.test(navigator.userAgent) &&
  6. typeof window.actionSheet == "function"
  7. ) {
  8. return true;
  9. } else {
  10. return false;
  11. }
  12. }
  13. },

安卓方法

  1. // 选择图片弹窗按钮
  2. selectPhotoSheet(arrIndex) {
  3. let that = this;
  4. window.actionSheet(["拍照", "相册"]).then(index => {
  5. that.cameraGetPicture(index, arrIndex);
  6. });
  7. },
  8. // 拍照或相册选择
  9. cameraGetPicture(data, arrIndex) {
  10. // data == 2 为相册
  11. window
  12. .cameraGetPicture(data)
  13. .then(base64 => {
  14. console.log(base64);
  15. this.uploadImg(arrIndex, base64);
  16. })
  17. .then(err => {
  18. console.log(err);
  19. });
  20. },

PC方法

  1. // 上传图片
  2. beforeUpload(file, index) {
  3. this.uploadFlag = true;
  4. let picType = file.file.type;
  5. if (
  6. !(
  7. picType == "image/png" ||
  8. picType == "image/jpg" ||
  9. picType == "image/jpeg"
  10. )
  11. ) {
  12. this.$message.warning("只能JPG/PNG格式的照片");
  13. this.list[index].src = "";
  14. return false;
  15. }
  16. if (file.file.size > 2 * 1024 * 1024) {
  17. this.$message.warning("图片大小不能超多2M");
  18. return false;
  19. }
  20. // let params = new FormData();
  21. // params.append("file", file.file);
  22. common.getBase64(file.file).then(base64 => {
  23. // this.list[index].dstImageData = base64;
  24. this.uploadImg(index, base64);
  25. });
  26. this.dialogVisible = true;
  27. return false;
  28. },
  29. // 上传图片
  30. uploadImg(index, base64) {
  31. let arr = base64.split(",");
  32. let params = {
  33. prefix: arr[0],
  34. dataString: arr[1]
  35. };
  36. let CancelToken = axios.CancelToken;
  37. let self = this;
  38. axios({
  39. url: this.imgUploadUrlBase,
  40. method: "post",
  41. data: params,
  42. headers: {
  43. "Content-Type": "application/json;charser=utf-8",
  44. Authorization: `Bearer${store.state.login.login.access_token}`
  45. },
  46. cancelToken: new CancelToken(function executor(c) {
  47. self.cancel = c;
  48. }),
  49. onUploadProgress: progressEvent => {
  50. this.uploadPercent = Math.round(
  51. (progressEvent.loaded / progressEvent.total) * 100
  52. );
  53. }
  54. })
  55. .then(({ data: { data } }) => {
  56. api
  57. .getRecognition({
  58. imgPath: data.filePath
  59. })
  60. .then(res => {
  61. this.list[index].dstImageData = data.filePath;
  62. this.list[index].nameplateTableJson = res;
  63. this.$message.success("上传成功");
  64. });
  65. })
  66. .catch(() => {
  67. this.$message.error("上传失败");
  68. })
  69. .finally(() => {
  70. this.uploadFlag = false;
  71. this.uploadPercent = 0;
  72. });
  73. },

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

 友情链接:直通硅谷  点职佳  北美留学生论坛

本站QQ群:前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

W3xue 的所有内容仅供测试,对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接(目前9元/月)请联系QQ:27243702 沸活量
皖ICP备17017327号-2 皖公网安备34020702000426号