JS判断当前是否平板安卓并是否支持cordova方法的示例代码
短信预约 -IT技能 免费直播动态提醒
需求: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"
:class="lazy" data-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].class="lazy" data-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判断当前平板安卓内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网！
免责声明：
① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的，并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据，供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。
② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
