需求: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判断当前平板安卓内容请搜索w3xue以前的文章或继续浏览下面的相关文章希望大家以后多多支持w3xue!