From 8951553d20b1307bfb3281743c77db55f65de792 Mon Sep 17 00:00:00 2001
From: zhaoxiaoqiang <l287285524@qq.com>
Date: Thu, 04 Aug 2022 23:48:49 +0800
Subject: [PATCH] upload
---
src/components/upload/uploadIdCard.vue | 305 +++++++++++++++++++++++++++-----------------------
1 files changed, 167 insertions(+), 138 deletions(-)
diff --git a/src/components/upload/uploadIdCard.vue b/src/components/upload/uploadIdCard.vue
index 0c0dcaf..7f6c113 100644
--- a/src/components/upload/uploadIdCard.vue
+++ b/src/components/upload/uploadIdCard.vue
@@ -10,33 +10,39 @@
<!--上传按钮-->
<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 />
+ <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 />
+ <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"
- />
+ <label class="upload" ref="androidInputFileImage">
+ <input
+ class="sr-only"
+ style="display: none; cursor: pointer"
+ type="file"
+ id="androidInputFileImage"
+
+ @change="handlePhotoChange($event, 1)"
+ accept="image/jpg, image/jpeg, image/png"
+ />
+ </label>
+ <label class="upload" ref="androidInputFileCapture">
+ <input
+ class="sr-only"
+ style="display: none; cursor: pointer"
+ type="file"
+ id="androidInputFileCapture"
+
+ @change="handlePhotoChange($event, 2)"
+ accept="image/*"
+ capture="camera"
+ />
+ </label>
</div>
<!--选择上传图片还是拍照-->
<van-action-sheet
@@ -69,42 +75,42 @@
picZ: {},
picF: {},
zOrf: "",
- isFirst: true
+ isFirst: true,
};
},
props: {
cardFont: {
- type: String
+ type: String,
},
cardBack: {
- type: String
- }
+ type: String,
+ },
},
watch: {
- cardFont: function(newVal, oldVal) {
+ cardFont: function (newVal, oldVal) {
if (newVal) {
this.picList[0].fileId = this.cardFont.slice(1);
this.picList[0].fileUrl = this.cardFont;
}
},
- cardBack: function(newVal, oldVal) {
+ 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) {
+ 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) {
+ files.forEach(function (file, i) {
// 图片的拍摄方向
var orientation;
// 格式是否支持的判断
@@ -116,86 +122,86 @@
// 获取文件内容
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.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) {
+ submitUploadImg: function (type, base64) {
let that = this;
// 防止操作的模态窗
let submitInfo = {
base64Data: base64.split(",")[1], // 文件base64
- suffix: base64.split(",")[0].split(";")["0"].split("/")[1]
+ suffix: base64.split(",")[0].split(";")["0"].split("/")[1],
};
this.$api.uploadFile(submitInfo).then(
- res => {
+ (res) => {
if (that.zOrf == 1) {
that.picZ = {
fileUrl: res.body.fileUrl,
- fileId: res.body.fileId
+ fileId: res.body.fileId,
};
that.picList[0] = that.picZ;
} else {
that.picF = {
fileUrl: res.body.fileUrl,
- fileId: res.body.fileId
+ fileId: res.body.fileId,
};
that.picList[1] = that.picF;
}
@@ -204,7 +210,7 @@
}
that.SET_APP_LOADING(false);
},
- error => {
+ (error) => {
this.SET_APP_LOADING(false);
}
);
@@ -215,9 +221,9 @@
this.$api
.getIdCardInfo({
idBackId: this.picList[1].fileId,
- idFrontId: this.picList[0].fileId
+ idFrontId: this.picList[0].fileId,
})
- .then(res => {
+ .then((res) => {
let obj = res.body;
obj.idBackUrl = this.picList[1].fileUrl;
obj.idFrontUrl = this.picList[0].fileUrl;
@@ -226,14 +232,14 @@
}
},
// 图片旋转处理
- getImgData: function(img, dir, next) {
+ 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() {
+ image.onload = function () {
let resultWidth = 0;
let resultHeight = 0;
let maxWidthOrHeight = 1024;
@@ -282,23 +288,23 @@
image.src = img;
},
compress(img) {
- let quality = 0.92, //压缩比例
+ 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);
+ 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
+ fileId: id,
})
- .then(res => {
+ .then((res) => {
if (res.body.authStatus === 1) {
this.$emit("on-check-auth", "下一步");
}
@@ -313,13 +319,15 @@
},
// 选择拍照或者相册选项
handleMenuSelect(item, index) {
- console.log(this.$refs.androidInputFileCapture.click(),index);
+ console.log(this.$refs.androidInputFileCapture.click(), index);
if (index === 0) {
- this.$refs.androidInputFileCapture.dispatchEvent(new MouseEvent('click'))
- // this.$refs.androidInputFileCapture.select();
+ // this.$refs.androidInputFileCapture.dispatchEvent(
+ // new MouseEvent("click")
+ // );
+ this.$refs.androidInputFileCapture.click();
} else {
- this.$refs.androidInputFileImage.dispatchEvent(new MouseEvent('click'))
- // this.$refs.androidInputFileImage.select();
+ // this.$refs.androidInputFileImage.dispatchEvent(new MouseEvent("click"));
+ this.$refs.androidInputFileImage.click();
}
this.selectModel = false;
},
@@ -328,42 +336,64 @@
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';
- }
- }
+ 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);
- }
+ created() {
+ // let
+ // console.log(shebei);
+ },
};
</script>
-<style lang="less" scoped >
+<style lang="less" scoped>
.component-photo-upload {
+ .upload {
+ cursor: pointer;
+ display: block;
+ width: 100px;
+ height: 100px;
+ line-height: 100px;
+ position: relative;
+ text-align: center;
+ overflow: hidden;
+ }
+
+ .sr-only {
+ position: absolute;
+ width: 1px;
+ height: 1px;
+ padding: 0;
+ overflow: hidden;
+ clip: rect(0, 0, 0, 0);
+ white-space: nowrap;
+ border: 0;
+ margin: -1px;
+ }
.pic-title {
h4 {
padding: 10px 0;
@@ -371,7 +401,6 @@
line-height: 1;
color: #333;
font-weight: normal;
-
}
}
--
Gitblit v1.8.0