JS判斷當(dāng)前是否平板安卓并是否支持cordova方法的示例代碼
需求: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)文章希望大家以后多多支持腳本之家!
相關(guān)文章
js中獲取鍵盤(pán)按下鍵值event.keyCode、event.charCode和event.which的兼容性詳解
這篇文章主要給大家介紹了關(guān)于Javascript中獲取鍵盤(pán)按下鍵值event.keyCode、event.charCode和event.which的兼容性的相關(guān)資料,文中介紹的非常詳細(xì),需要的朋友可以參考借鑒,下面來(lái)一起看看吧。2017-03-03JavaScript實(shí)現(xiàn)讀取上傳視頻文件的時(shí)長(zhǎng)和第一幀畫(huà)面過(guò)程講解
當(dāng)我們做一個(gè)后臺(tái)系統(tǒng)的音視頻管理模塊時(shí),通常要限制文件的大小和類型,這篇文章主要介紹了JavaScript實(shí)現(xiàn)讀取上傳視頻文件的時(shí)長(zhǎng)和第一幀畫(huà)面過(guò)程,需要詳細(xì)了解實(shí)現(xiàn)方法可以參考下文2023-05-05不提示直接關(guān)閉網(wǎng)頁(yè)窗口的JS示例代碼
本篇文章主要是對(duì)不提示直接關(guān)閉網(wǎng)頁(yè)窗口的JS示例代碼進(jìn)行了介紹,需要的朋友可以過(guò)來(lái)參考下,希望對(duì)大家有所幫助2013-12-12前端實(shí)現(xiàn)類似chatgpt的對(duì)話頁(yè)面(案例)
這篇文章主要介紹了前端實(shí)現(xiàn)類似chatgpt的對(duì)話頁(yè)面(案例),需要的朋友可以參考下2023-03-03微信小程序下拉加載和上拉刷新兩種實(shí)現(xiàn)方法詳解
這篇文章主要介紹了微信小程序下拉加載和上拉刷新兩種實(shí)現(xiàn)方法詳解,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2019-09-09javaScript讓文本框內(nèi)的最后一個(gè)文字的后面獲得焦點(diǎn)實(shí)現(xiàn)代碼
讓文本框內(nèi)的最后一個(gè)文字的后面獲得焦點(diǎn),在應(yīng)用中很常見(jiàn),接下來(lái)提供解決方案,按興趣的朋友可以了解下2013-01-01javascript溫習(xí)的一些筆記 基礎(chǔ)常用知識(shí)小結(jié)
在電腦上找到多年前的javascript的一些小筆記,因?yàn)橐獙⒐P記本上面的文件整理一下, 不用的刪除掉, 所以將此篇筆記再發(fā)布一下,存檔到自己的博客吧, 電腦上的文件就刪除了2011-06-06