JS判斷當(dāng)前是否平板安卓并是否支持cordova方法的示例代碼
需求:pc和安卓平板共用一套代碼,平板的代碼用了cordova做了一個殼子嵌套如果用了cordova就不支持elementUI中的上傳功能,所以要用判斷,現(xiàn)用戶在平板又會用瀏覽器打開項目所以要做兩層判斷
app內(nèi)是用cordova中的 window.actionSheet方法調(diào)用上傳讀取相機(jī)和圖庫方法
上代碼
<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中打開應(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(["拍照", "相冊"]).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; }); },
到此這篇關(guān)于JS判斷當(dāng)前是否平板安卓并是否支持cordova方法的文章就介紹到這了,更多相關(guān)js判斷當(dāng)前平板安卓內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
js中獲取鍵盤按下鍵值event.keyCode、event.charCode和event.which的兼容性詳解
這篇文章主要給大家介紹了關(guān)于Javascript中獲取鍵盤按下鍵值event.keyCode、event.charCode和event.which的兼容性的相關(guān)資料,文中介紹的非常詳細(xì),需要的朋友可以參考借鑒,下面來一起看看吧。2017-03-03JavaScript實現(xiàn)讀取上傳視頻文件的時長和第一幀畫面過程講解
當(dāng)我們做一個后臺系統(tǒng)的音視頻管理模塊時,通常要限制文件的大小和類型,這篇文章主要介紹了JavaScript實現(xiàn)讀取上傳視頻文件的時長和第一幀畫面過程,需要詳細(xì)了解實現(xiàn)方法可以參考下文2023-05-05不提示直接關(guān)閉網(wǎng)頁窗口的JS示例代碼
本篇文章主要是對不提示直接關(guān)閉網(wǎng)頁窗口的JS示例代碼進(jìn)行了介紹,需要的朋友可以過來參考下,希望對大家有所幫助2013-12-12javaScript讓文本框內(nèi)的最后一個文字的后面獲得焦點(diǎn)實現(xiàn)代碼
讓文本框內(nèi)的最后一個文字的后面獲得焦點(diǎn),在應(yīng)用中很常見,接下來提供解決方案,按興趣的朋友可以了解下2013-01-01javascript溫習(xí)的一些筆記 基礎(chǔ)常用知識小結(jié)
在電腦上找到多年前的javascript的一些小筆記,因為要將筆記本上面的文件整理一下, 不用的刪除掉, 所以將此篇筆記再發(fā)布一下,存檔到自己的博客吧, 電腦上的文件就刪除了2011-06-06