<!--
|
* @Date: 2019-08-30 18:04:49
|
* @LastEditors: zxq
|
* @LastEditTime: 2022-08-05 13:56:46
|
* @Description:
|
-->
|
<template>
|
<div class="component-photo-upload">
|
<div class="photo-list">
|
<!--上传按钮-->
|
<div class="pic-item-box-z" @click="handleUploadPicture(1)">
|
<img v-if="picZ.fileUrl" :src="picZ.fileUrl" alt />
|
<img v-if="!picZ.fileUrl&&cardFont" :src="cardFont" alt />
|
</div>
|
<!--上传按钮-->
|
<div class="pic-item-box-f" @click="handleUploadPicture(2)">
|
<img v-if="picF.fileUrl" :src="picF.fileUrl" alt />
|
<img v-if="!picF.fileUrl&&cardBack" :src="cardBack" alt />
|
</div>
|
</div>
|
<!-- 真正的上传按钮-->
|
<div>
|
<input
|
style="display: none;cursor:pointer"
|
type="file"
|
id='androidInputFileImage'
|
ref="androidInputFileImage"
|
@change="handlePhotoChange($event,1)"
|
accept="image/jpg, image/jpeg, image/png"
|
/>
|
<input
|
style="display: none;cursor:pointer;"
|
type="file"
|
id='androidInputFileCapture'
|
ref="androidInputFileCapture"
|
@change="handlePhotoChange($event,2)"
|
accept="image/*"
|
capture="camera"
|
/>
|
</div>
|
<!--选择上传图片还是拍照-->
|
<van-action-sheet
|
v-model="selectModel"
|
:close-on-click-overlay="false"
|
cancel-text="取消"
|
:actions="nav"
|
@select="handleMenuSelect"
|
></van-action-sheet>
|
<!-- <button @click="onclick">aa</button> -->
|
</div>
|
</template>
|
|
<script>
|
import Bus from "../../bus";
|
import { SET_APP_LOADING } from "@/store/mutations-types";
|
import { mapMutations } from "vuex";
|
import EXIF from "exif-js";
|
import { _imgCompress, _fileToBase64 } from "@/utils/index";
|
import Vue from "vue";
|
import { ActionSheet } from "vant";
|
Vue.use(ActionSheet);
|
export default {
|
name: "upLoadIdCard",
|
data() {
|
return {
|
selectModel: false, // 模态窗选择拍照还是相册
|
nav: [{ name: "拍照" }, { name: "从手机相册选择" }],
|
picList: [{}, {}],
|
picZ: {},
|
picF: {},
|
zOrf: "",
|
isFirst: true
|
};
|
},
|
props: {
|
cardFont: {
|
type: String
|
},
|
cardBack: {
|
type: String
|
}
|
},
|
watch: {
|
cardFont: function(newVal, oldVal) {
|
if (newVal) {
|
this.picList[0].fileId = this.cardFont.slice(1);
|
this.picList[0].fileUrl = this.cardFont;
|
}
|
},
|
cardBack: function(newVal, oldVal) {
|
if (this.cardBack) {
|
this.picList[1].fileId = this.cardBack.slice(1);
|
this.picList[1].fileUrl = this.cardBack;
|
}
|
}
|
},
|
methods: {
|
...mapMutations([SET_APP_LOADING]),
|
// 处理图片上传的事件(deleteIndex---删除图片的索引)
|
handlePhotoChange: function(evt,type) {
|
let that = this;
|
let shebei = this.judgeBrand(navigator.userAgent.toLowerCase());
|
that.SET_APP_LOADING(true);
|
// 图片是单选还是多选
|
const files = Array.prototype.slice.call(evt.target.files);
|
// 图片的处理
|
files.forEach(function(file, i) {
|
// 图片的拍摄方向
|
var orientation;
|
// 格式是否支持的判断
|
if (!/\/(?:jpg|jpeg|png)/i.test(file.type)) {
|
that.$vux.toast.text("仅支持jpg|png图片格式", "middle");
|
that.SET_APP_LOADING(false);
|
return;
|
}
|
// 获取文件内容
|
let reader = new FileReader();
|
// reader.readAsArrayBuffer(file);
|
reader.onload = function(e) {
|
// EXIF.getData(file, function() {
|
// orientation = EXIF.getTag(this, "Orientation");
|
// console.log(orientation)
|
// 使用exif，处理图片的旋转问题，然后执行回调函数(orientation永远是0);
|
// if(type==2&&orientation){
|
// // 拍照上传
|
// that.getImgData(e.target.result, orientation, function(data) {
|
// // 这里可以使用校正后的图片data了
|
// var img = new Image();
|
// img.src = data;
|
// // 图片加载完毕之后进行压缩，然后上传
|
// if (img.complete) {
|
|
// callback();
|
// } else {
|
// img.onload = callback;
|
// }
|
// // 图片的路径获取成功后
|
// function callback(){
|
// // 压缩后的图片的base64字符串
|
// let data = that.compress(img);
|
// // 调取接口上传图片
|
// that.submitUploadImg(that.fileType, data);
|
// }
|
// });
|
// }else{
|
var comimg = new Image();
|
comimg.src = e.target.result;
|
comimg.onload = function(eimg){
|
let num = 1;
|
if(this.width<this.height){
|
num = 8
|
}
|
that.getImgData(e.target.result, num, function(data) {
|
// 这里可以使用校正后的图片data了
|
var img = new Image();
|
img.src = data;
|
// 图片加载完毕之后进行压缩，然后上传
|
if (img.complete) {
|
callback();
|
} else {
|
img.onload = callback;
|
}
|
// 图片的路径获取成功后
|
function callback() {
|
// 压缩后的图片的base64字符串
|
console.log(img.width,img.height)
|
let data = that.compress(img);
|
// 调取接口上传图片
|
that.submitUploadImg(that.fileType, data);
|
}
|
});
|
}
|
// }
|
// })
|
};
|
reader.readAsDataURL(file);
|
});
|
},
|
// type文件上传的路径，data图片的base64字符串(删除图片即重新上传)
|
submitUploadImg: function(type, base64) {
|
let that = this;
|
// 防止操作的模态窗
|
let submitInfo = {
|
base64Data: base64.split(",")[1], // 文件base64
|
suffix: base64.split(",")[0].split(";")["0"].split("/")[1]
|
};
|
this.$api.uploadFile(submitInfo).then(
|
res => {
|
if (that.zOrf == 1) {
|
that.picZ = {
|
fileUrl: res.body.fileUrl,
|
fileId: res.body.fileId
|
};
|
that.picList[0] = that.picZ;
|
} else {
|
that.picF = {
|
fileUrl: res.body.fileUrl,
|
fileId: res.body.fileId
|
};
|
that.picList[1] = that.picF;
|
}
|
if (this.picList[1].fileId && this.picList[0].fileId) {
|
this.getIdCardInfo();
|
}
|
that.SET_APP_LOADING(false);
|
},
|
error => {
|
this.SET_APP_LOADING(false);
|
}
|
);
|
},
|
// 获取身份证信息
|
getIdCardInfo() {
|
if (!this.isFirst) {
|
this.$api
|
.getIdCardInfo({
|
idBackId: this.picList[1].fileId,
|
idFrontId: this.picList[0].fileId
|
})
|
.then(res => {
|
let obj = res.body;
|
obj.idBackUrl = this.picList[1].fileUrl;
|
obj.idFrontUrl = this.picList[0].fileUrl;
|
Bus.$emit("getIdUserInfo", obj);
|
});
|
}
|
},
|
// 图片旋转处理
|
getImgData: function(img, dir, next) {
|
// @param {string} img 图片的base64
|
// @param {int} dir exif获取的方向信息
|
// @param {function} next 回调方法，返回校正方向后的base64
|
var image = new Image();
|
let canvas = document.createElement("canvas");
|
let ctx = canvas.getContext("2d");
|
image.onload = function() {
|
let resultWidth = 0;
|
let resultHeight = 0;
|
let maxWidthOrHeight = 1024;
|
let drawWidth = this.naturalWidth;
|
let drawHeight = this.naturalHeight;
|
// 以下改变图片大小，控制最大宽度为1024
|
var maxSide = Math.max(drawWidth, drawHeight);
|
if (maxSide > maxWidthOrHeight) {
|
let minSide = Math.min(drawWidth, drawHeight);
|
minSide = (minSide / maxSide) * maxWidthOrHeight;
|
maxSide = maxWidthOrHeight;
|
if (drawWidth > drawHeight) {
|
resultWidth = maxSide;
|
resultHeight = minSide;
|
} else {
|
resultWidth = minSide;
|
resultHeight = maxSide;
|
}
|
} else {
|
resultWidth = drawWidth;
|
resultHeight = drawHeight;
|
}
|
if (dir === 3) {
|
canvas.width = resultWidth;
|
canvas.height = resultHeight;
|
ctx.translate(resultWidth, resultHeight);
|
ctx.rotate(Math.PI);
|
} else if (dir === 6) {
|
canvas.width = resultHeight;
|
canvas.height = resultWidth;
|
ctx.translate(resultHeight, 0);
|
ctx.rotate(Math.PI / 2);
|
} else if (dir === 8) {
|
canvas.width = resultHeight;
|
canvas.height = resultWidth;
|
ctx.translate(0, resultWidth);
|
ctx.rotate(-Math.PI / 2);
|
} else {
|
canvas.width = resultWidth;
|
canvas.height = resultHeight;
|
}
|
ctx.drawImage(this, 0, 0, resultWidth, resultHeight);
|
// 返回校正图片
|
next(canvas.toDataURL("image/jpeg", 0.8));
|
};
|
image.src = img;
|
},
|
compress(img) {
|
let quality = 0.92, //压缩比例
|
w = img.width,
|
h = img.height,
|
canvas = document.createElement("canvas"),
|
ctx = canvas.getContext("2d");
|
canvas.width = w;
|
canvas.height = h;
|
ctx.drawImage(img, 0, 0, w, h);
|
return canvas.toDataURL("image/jpeg", quality);
|
},
|
checkAuth(id) {
|
// authStatus: 0 未授权 1授权---用户授权后才能执行下一步
|
this.$api
|
.checkAuth({
|
fileId: id
|
})
|
.then(res => {
|
if (res.body.authStatus === 1) {
|
this.$emit("on-check-auth", "下一步");
|
}
|
});
|
},
|
// 点击上传按钮
|
handleUploadPicture(i) {
|
this.isFirst = false;
|
this.zOrf = i;
|
// this.$refs.androidInputFileCapture.click();
|
this.selectModel = true;
|
},
|
// 选择拍照或者相册选项
|
handleMenuSelect(item, index) {
|
console.log( this.$refs.androidInputFileCapture )
|
if (index === 0) {
|
this.$refs.androidInputFileCapture.click();
|
} else {
|
this.$refs.androidInputFileImage.click();
|
}
|
this.selectModel = false;
|
},
|
// 处理图片的删除
|
handleDeletePicture(index) {
|
this.selectModel = true;
|
},
|
judgeBrand(sUserAgent) {
|
var isIphone = sUserAgent.match(/iphone/i) == "iphone";
|
var isHuawei = sUserAgent.match(/huawei/i) == "huawei";
|
var isHonor = sUserAgent.match(/honor/i) == "honor";
|
var isOppo = sUserAgent.match(/oppo/i) == "oppo";
|
var isOppoR15 = sUserAgent.match(/pacm00/i) == "pacm00";
|
var isVivo = sUserAgent.match(/vivo/i) == "vivo";
|
var isXiaomi = sUserAgent.match(/mi\s/i) == "mi ";
|
var isXiaomi2s = sUserAgent.match(/mix\s/i) == "mix ";
|
var isRedmi = sUserAgent.match(/redmi/i) == "redmi";
|
var isSamsung = sUserAgent.match(/sm-/i) == "sm-";
|
if (isIphone) {
|
return 'iphone';
|
} else if (isHuawei || isHonor) {
|
return 'huawei';
|
} else if (isOppo || isOppoR15) {
|
return 'oppo';
|
} else if (isVivo) {
|
return 'vivo';
|
} else if (isXiaomi || isRedmi || isXiaomi2s) {
|
return 'xiaomi';
|
} else if (isSamsung) {
|
return 'samsung';
|
} else {
|
return 'default';
|
}
|
}
|
},
|
created(){
|
// let
|
// console.log(shebei);
|
}
|
};
|
</script>
|
|
<style lang="less" scoped >
|
.component-photo-upload {
|
.pic-title {
|
h4 {
|
padding: 10px 0;
|
font-size: 15px;
|
line-height: 1;
|
color: #333;
|
font-weight: normal;
|
}
|
}
|
|
.photo-list {
|
// .pic-item-box{
|
// width: 239px;
|
// height: 134px;
|
// }
|
|
.pic-item-box-z {
|
width: 239px;
|
height: 134px;
|
background-image: url("../../../static/img/idcardz.png");
|
background-size: cover;
|
margin: auto;
|
margin-bottom: 20px;
|
|
img {
|
width: 100%;
|
height: 100%;
|
}
|
}
|
|
.pic-item-box-f {
|
width: 239px;
|
height: 134px;
|
background-image: url("../../../static/img/idcardf.png");
|
background-size: cover;
|
margin: auto;
|
img {
|
width: 100%;
|
height: 100%;
|
}
|
}
|
}
|
}
|
</style>
|
