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判斷當前平板安卓內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet!