需求: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;
});
},
