From 1e3e3593a39d743d5dfa8491a9abb95b8be4f079 Mon Sep 17 00:00:00 2001
From: zhaoxiaoqiang <287285524@qq.com>
Date: Fri, 05 Aug 2022 14:36:57 +0800
Subject: [PATCH] upload
---
src/components/upload/uploadIdCard.vue | 311 +++++++++++++++++++++++----------------------------
1 files changed, 143 insertions(+), 168 deletions(-)
diff --git a/src/components/upload/uploadIdCard.vue b/src/components/upload/uploadIdCard.vue
index f054905..b0943b9 100644
--- a/src/components/upload/uploadIdCard.vue
+++ b/src/components/upload/uploadIdCard.vue
@@ -1,7 +1,7 @@
<!--
* @Date: 2019-08-30 18:04:49
* @LastEditors: zxq
- * @LastEditTime: 2022-08-04 16:08:29
+ * @LastEditTime: 2022-08-05 14:35:52
* @Description:
-->
<template>
@@ -10,46 +10,47 @@
<!--上传按钮-->
<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>
- <!-- <label class="upload" > -->
- <input
- style="cursor:pointer"
- type="file"
- id="androidInputFileImage"
- ref="androidInputFileImage"
- @change="handlePhotoChange($event, 1)"
- accept="image/jpg, image/jpeg, image/png"
- />
- <!-- </label> -->
- <!-- <label class="upload" > -->
- <input
- style="cursor:pointer"
- type="file"
- id="androidInputFileCapture"
- ref="androidInputFileCapture"
- @change="handlePhotoChange($event, 2)"
- accept="image/*"
- capture="camera"
- />
- <!-- </label> -->
+ <input
+ style="display: none;cursor:pointer"
+ type="file"
+ id='inputFileImage'
+ ref="androidInputFileImage"
+ @change="handlePhotoChange($event,1)"
+ accept="image/jpg, image/jpeg, image/png"
+ />
+ <input
+ style="display: none;cursor:pointer;"
+ type="file"
+ id='inputFileCapture'
+ ref="androidInputFileCapture"
+ @change="handlePhotoChange($event,2)"
+ accept="image/*"
+ capture="camera"
+ />
</div>
<!--选择上传图片还是拍照-->
- <van-action-sheet
+ <!-- <van-action-sheet
v-model="selectModel"
:close-on-click-overlay="false"
cancel-text="取消"
:actions="nav"
@select="handleMenuSelect"
- ></van-action-sheet>
+ ></van-action-sheet> -->
+ <van-action-sheet v-model="selectModel" cancel-text="取消" title="标题">
+ <div v-for="item in nav" :key="item.code" class="content">
+ <span @click="handleMenuSelect(item.code)">{{item.name}}</span>
+ </div>
+ </van-action-sheet>
<!-- <button @click="onclick">aa</button> -->
</div>
</template>
@@ -68,47 +69,47 @@
data() {
return {
selectModel: false, // 模态窗选择拍照还是相册
- nav: [{ name: "拍照" }, { name: "从手机相册选择" }],
+ nav: [{ name: "拍照",code:0 }, { name: "从手机相册选择",code:1 }],
picList: [{}, {}],
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;
// 格式是否支持的判断
@@ -120,86 +121,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;
}
@@ -208,7 +209,7 @@
}
that.SET_APP_LOADING(false);
},
- (error) => {
+ error => {
this.SET_APP_LOADING(false);
}
);
@@ -219,9 +220,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;
@@ -230,14 +231,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;
@@ -286,23 +287,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", "下一步");
}
@@ -316,15 +317,11 @@
this.selectModel = true;
},
// 选择拍照或者相册选项
- handleMenuSelect(item, index) {
- console.log(this.$refs.androidInputFileCapture.$el, index);
+ handleMenuSelect(index) {
+ console.log( this.$children[0] )
if (index === 0) {
- // this.$refs.androidInputFileCapture.dispatchEvent(
- // new MouseEvent("click")
- // );
this.$refs.androidInputFileCapture.click();
} else {
- // this.$refs.androidInputFileImage.dispatchEvent(new MouseEvent("click"));
this.$refs.androidInputFileImage.click();
}
this.selectModel = false;
@@ -334,64 +331,42 @@
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;
--
Gitblit v1.8.0