front/merchapp
7
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

增加压缩图片

Browse Source
This commit is contained in:
qijq 2025-06-26 02:09:26 +08:00
parent f54aacadfc
commit 1f763ac279
8 changed files with 388 additions and 499 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

35
java-mall-app-shop-admin/api/upload.js
View File

@ -10,18 +10,18 @@
* @seehttps://mall.gpxscs.cn/mobile/shop/oss/upload
*/
import http from '../utils/http'
import config from '../config/config'
import http from "../utils/http";
import config from "../config/config";
export function UploadFilePromise(filePath, formData) {
let ukey = uni.getStorageSync('ukey');
let ukey = uni.getStorageSync("ukey");
return new Promise((resolve, reject) => {
uni.uploadFile({
// 完整上传路径 H5端需要解决跨域问题
url: 'https://mall.gpxscs.cn/mobile/shop/oss/upload',
method: 'POST',
url: "https://mall.gpxscs.cn/mobile/shop/oss/upload",
method: "POST",
filePath: filePath,
name: 'upfile',
name: "upfile",
formData: { perm_key: ukey, ...formData },
success: (res) => {
const result = JSON.parse(res.data);
@ -34,36 +34,35 @@ export function UploadFilePromise(filePath, formData) {
});
}
export function batchNoApi(filePath, file, type) {
return new Promise((resolve, reject) => {
uni.uploadFile({
url:'https://mall.gpxscs.cn/mobile/shop/lakala/tk/uploadOcrImg',
url: "https://mall.gpxscs.cn/mobile/shop/lakala/tk/uploadOcrImg",
method: "POST",
filePath,
name:'upfile',
name: "upfile",
formData: {
imgType: type,
},
success: (res) => {
if (res?.data) {
resolve(JSON.parse(res?.data)?.data)
resolve(JSON.parse(res?.data)?.data);
}
},
fail: (res) => {
reject(res)
}
})
})
reject(res);
},
});
});
}
export function imgOcrResultApi(data) {
return http({
url:'/shop/lakala/tk/imgOcrResult',
method:'POST',
url: "/shop/lakala/tk/imgOcrResult",
method: "POST",
headers: {
'content-type': 'application/x-www-form-urlencoded',
"content-type": "application/x-www-form-urlencoded",
},
data,
})
});
}

6
java-mall-app-shop-admin/manifest.json
View File

@ -17,6 +17,11 @@
"autoclose": true,
"delay": 0
},
"ios": {
"capabilities": {
"com.apple.SafariKeychain": true
}
},
/* 模块配置 */
"modules": {
"Maps": {},
@ -170,4 +175,3 @@
"vueVersion": "2"
}
/* 5+App特有相关 */

237
java-mall-app-shop-admin/pages/audit/shop2.vue
View File

@ -455,6 +455,13 @@
@cancel="showEndTime = false"
></u-datetime-picker>
<u-toast ref="uToast" />
<u-loading-page
:loading="loading"
bgColor="rgba(0,0,0,0.5)"
fontSize="32rpx"
color="#fff"
loadingText="数据正在加载中..."
></u-loading-page>
</view>
</template>
@ -468,8 +475,7 @@ import {
import navBar from "@/components/uni-nav-bar/uni-nav-bar";
import tuiRadio from "@/components/tui-radio/tui-radio.vue";
import tuiRadioGroup from "@/components/tui-radio-group/tui-radio-group.vue";
import { compressImg } from '@/utils/tool.js'
import { H5compressImg, getBase64Size } from "@/utils/tool.js";
const orcImgTypeConf = {
FR_ID_CARD_FRONT: "FR_ID_CARD_FRONT",
@ -493,6 +499,7 @@ export default {
showPicker: false,
showStartTime: false,
showEndTime: false,
loading: false,
startTime: null,
endTime: null,
startMinDate: 0,
@ -549,7 +556,7 @@ export default {
license_type_name: "",
orcTimeout: null,
action: "",
limitType: ['png', 'jpg', 'jpeg'], //允许的图片后缀
limitType: ["png", "jpg", "jpeg"], //允许的图片后缀
fileMaxSize: 1 * 1024 * 1024, // 超出1M开启压缩
maxSize: 5 * 1024 * 1024, //图片最大不能超过20M
fileMinSize: 5 * 1024, // 最小为5KB
@ -716,50 +723,47 @@ export default {
uni.navigateBack();
},
overSize(e) {
uni.$u.toast("上传图片大小不能超过8MB!");
uni.$u.toast("上传图片大小不能超过5MB!");
},
compressImage(url) {
return new Promise((reslove, reject) => {
const tempFilePath = url //url是选中图片的路径
const tempFilePath = url; //url是选中图片的路径
uni.compressImage({
src: tempFilePath,
quality: 90, //压缩的程度
quality: 75, //压缩的程度
success: (res) => {
reslove(res.tempFilePath) //压缩成功返回的路径
reslove(res.tempFilePath); //压缩成功返回的路径
},
fail: (error) => {
console.log('压缩失败', error)
}
})
})
console.log("压缩失败", error);
},
async handerCompressImg(source, compressionRatio) {
let that = this;
return new Promise((resolve, reject) => {
compressImg(source.url, compressionRatio, source.type, compressRes => {
resolve(compressRes);
})
}).then((res) => {
source.size = res.size
// window.URL.revokeObjectURL(source.url) // 删除被压缩的缓存文件,这里注意，如果是相册选择上传，可能会删除相册的图片
source.url = res.source
source.thumb = res.source
return source
}).catch(err => {
console.log('图片压缩失败', err)
})
});
});
},
async getOcrText(filePath, file, type) {
return new Promise(async (resolve, reject) => {
this.loading = true;
//#ifdef APP-PLUS
filePath = await this.compressImage(filePath);
//#endif
// 压缩图片已base64 方式上传
//#ifdef H5
filePath = await H5compressImg(filePath, 0.75);
//#endif
let size = getBase64Size(filePath);
console.log(size);
const batchNoRes = await batchNoApi(filePath, file, type);
const batchNo = batchNoRes.batchNo;
if (!batchNoRes) {
this.loading = false;
reject(batchNoRes);
}
const formData = new FormData();
let formDataStr = "";
@ -778,132 +782,71 @@ export default {
});
const imgOcrRes = await imgOcrResultApi(formDataStr);
if (imgOcrRes.status == 250) {
switch (type) {
case "FR_ID_CARD_FRONT":
uni.showToast({
title: "上传身份证正面图片错误,请重新上传",
icon: "error",
duration: 2000,
});
this.form.legal_person_id_images == "";
this.fileList3 = [];
break;
case "FR_ID_CARD_BEHIND":
uni.showToast({
title: "上传身份证反面图片错误,请重新上传",
icon: "error",
duration: 2000,
});
this.form.legal_person_id_images2 == "";
this.fileList4 = [];
break;
case "ID_CARD_FRONT":
uni.showToast({
title: "上传身份证正面图片错误,请重新上传",
icon: "error",
duration: 2000,
});
this.form2.individual_id_images == "";
this.fileList5 = [];
break;
case "ID_CARD_BEHIND":
uni.showToast({
title: "上传身份证反面图片错误,请重新上传",
icon: "error",
duration: 2000,
});
this.form2.individual_id_images2 == "";
this.fileList6 = [];
break;
case "BUSINESS_LICENCE":
uni.showToast({
title: "营业图片上传有误,请重新上传",
icon: "error",
duration: 2000,
});
this.form.biz_license_image == "";
this.fileList = [];
break;
}
}
clearTimeout(this.orcTimeout);
this.loading = false;
resolve(imgOcrRes?.data);
}, 1000);
});
},
/**判断文件类型是否正确 */
isAssetTypeAnImage(ext) {
const str = ext.split('.')[1];
const str = ext.split(".")[1];
return this.limitType.indexOf(str.toLowerCase()) !== -1;
},
getCompressionRatio(fileSize) {
const multiple = (fileSize / this.fileMaxSize).toFixed(2);
let compressionRatio = 1;
if (multiple > 5) {
compressionRatio = 0.5
} else if (multiple > 4) {
compressionRatio = 0.6
} else if (multiple > 3) {
compressionRatio = 0.7
} else if (multiple > 2) {
compressionRatio = 0.8
} else if (multiple > 1) {
compressionRatio = 0.9
} else {
compressionRatio = 2
}
return compressionRatio;
},
translate(imgSrc, scale) {
//imgSrc:图片的路径
//scale:缩放比例 0-1之间
return new Promise((reslove, reject) => {
var img = new Image(); //创建Image对象生成一个<img>标签
img.src = imgSrc; //将图片路径赋给<img>标签的src
img.onload = () => {//onload在图片加载成功后触发，在onload中完成压缩功能
var h = img.height/2; // 获取原本图片的宽高
var w = img.width/2; //默认按比例压缩,根据需求修改
var canvas = document.createElement('canvas');//创建画布
var ctx = canvas.getContext('2d'); //设置为2d效果
var width = document.createAttribute("width"); //创建属性节点
width.nodeValue = w; //设置属性值
var height = document.createAttribute("height");
height.nodeValue = h;
canvas.setAttributeNode(width); //设置画布宽高
canvas.setAttributeNode(height);
ctx.drawImage(img, 0, 0, w,h);//将图片贴到画布上
//img:图片 0,0:粘贴的位置 w,h:粘贴图片的大小
var base64 = canvas.toDataURL('image/png', scale);
//'image/png':压缩返回图片的类型 scale:图片质量
//如果要base64的流，可以直接将结果返回了
canvas = null; //清除画布
var blob = this.base64ToBlob(base64); //需要二进制流调用该方法拿到
let blobUrl = window.URL.createObjectURL(blob);//blob地址
reslove(blobUrl)
}
})
},
// base64转Blob
base64ToBlob(base64) {
var arr = base64.split(','),
mime = arr[0].match(/:(.*?);/)[1],
bstr = atob(arr[1]),
n = bstr.length,
u8arr = new Uint8Array(n);
while (n--) {
u8arr[n] = bstr.charCodeAt(n);
}
return new Blob([u8arr], {
type: mime,
});
},
// 上传图片
async afterRead(event, type) {
var item = event.file;
console.log("压缩前：",item.url);
var a = await this.translate(item.url,0.9)
item.url = a;
// let lists = [].concat(event.file);
// let fileListLen = this[`fileList${event.name}`].length;
// for (let index in lists) {
// const fileItem = lists[index];
// const fileSize = fileItem.size;
// const fileName = fileItem.name ?? '';
// if(!this.isAssetTypeAnImage(fileItem.name)) {
// this.$.msg('不允许该文件类型上传');
// return false
// }
// console.log('文件大小',fileSize);
// if (fileSize > this.fileMaxSize) {
// const compressionRatio = this.getCompressionRatio(fileSize);
// if (compressionRatio > 1) {
// uni.$u.toast("上传图片大小不能超过5MB!");
// return false
// }
// // 超出1M自动压缩图片
// item = await this.handerCompressImg(fileItem, compressionRatio)
// if (fileItem.size > this.maxSize) {
// uni.$u.toast("上传图片大小不能超过5MB!");
// return false
// }
// }
// if (fileItem.size < this.fileMinSize) {
// uni.$u.toast("上传图片大小不能超过5MB!");
// return false
// }
// }
console.log("压缩后：",item.url);
var imgUrl = item.url;
const group = {
url: imgUrl,
};
@ -929,7 +872,7 @@ export default {
this.fileList6.push(group);
break;
}
console.log(imgUrl)
console.log(imgUrl);
let res = await UploadFilePromise(imgUrl);
if (res && res.status == 200) {
@ -1099,7 +1042,7 @@ export default {
this.$refs.uToast.show({
message: "请上营业执照片",
type: "error",
duration: 1000,
duration: 2000,
});
return;
}
@ -1108,7 +1051,7 @@ export default {
// this.$refs.uToast.show({
// message: "请上许可证照片",
// type: "error",
// duration: 1000,
// duration: 2000,
// });
// return;
// }
@ -1117,7 +1060,7 @@ export default {
this.$refs.uToast.show({
message: "请上身份证图片正面照片",
type: "error",
duration: 1000,
duration: 2000,
});
return;
}
@ -1126,7 +1069,7 @@ export default {
this.$refs.uToast.show({
message: "请上身份证图片反面照片",
type: "error",
duration: 1000,
duration: 2000,
});
return;
}
@ -1154,7 +1097,7 @@ export default {
this.$refs.uToast.show({
message: "请上身份证图片反面照片",
type: "error",
duration: 1000,
duration: 2000,
});
return;
}
@ -1163,7 +1106,7 @@ export default {
this.$refs.uToast.show({
message: "请上身份证图片反面照片",
type: "error",
duration: 1000,
duration: 2000,
});
return;
}

107
java-mall-app-shop-admin/pages/audit/shop3.vue
View File

@ -172,7 +172,7 @@ import { batchNoApi, imgOcrResultApi } from "../../api/upload";
import { mapState } from "vuex";
import { throttle, debounce } from "lodash";
import navBar from "@/components/uni-nav-bar/uni-nav-bar";
import { compressImg } from '@/utils/tool.js'
import { H5compressImg } from "@/utils/tool.js";
const orcImgTypeConf = {
FR_ID_CARD_FRONT: "FR_ID_CARD_FRONT",
@ -231,7 +231,7 @@ export default {
},
],
},
limitType: ['png', 'jpg', 'jpeg'], //允许的图片后缀
limitType: ["png", "jpg", "jpeg"], //允许的图片后缀
fileMaxSize: 1 * 1024 * 1024, // 超出1M开启压缩
maxSize: 5 * 1024 * 1024, //图片最大不能超过20M
fileMinSize: 5 * 1024, // 最小为5KB
@ -263,66 +263,32 @@ export default {
},
compressImage(url) {
return new Promise((reslove, reject) => {
const tempFilePath = url //url是选中图片的路径
const tempFilePath = url; //url是选中图片的路径
uni.compressImage({
src: tempFilePath,
quality: 90, //压缩的程度
success: (res) => {
reslove(res.tempFilePath) //压缩成功返回的路径
reslove(res.tempFilePath); //压缩成功返回的路径
},
fail: (error) => {
console.log('压缩失败', error)
}
})
})
console.log("压缩失败", error);
},
async handerCompressImg(source, compressionRatio) {
let that = this;
return new Promise((resolve, reject) => {
compressImg(source.url, compressionRatio, source.type, compressRes => {
resolve(compressRes);
})
}).then((res) => {
source.size = res.size
// window.URL.revokeObjectURL(source.url) // 删除被压缩的缓存文件,这里注意，如果是相册选择上传，可能会删除相册的图片
source.url = res.source
source.thumb = res.source
return source
}).catch(err => {
console.log('图片压缩失败', err)
})
},
/**判断文件类型是否正确 */
isAssetTypeAnImage(ext) {
const str = ext.split('.')[1];
return this.limitType.indexOf(str.toLowerCase()) !== -1;
},
getCompressionRatio(fileSize) {
const multiple = (fileSize / this.fileMaxSize).toFixed(2);
let compressionRatio = 1;
if (multiple > 5) {
compressionRatio = 0.5
} else if (multiple > 4) {
compressionRatio = 0.6
} else if (multiple > 3) {
compressionRatio = 0.7
} else if (multiple > 2) {
compressionRatio = 0.8
} else if (multiple > 1) {
compressionRatio = 0.9
} else {
compressionRatio = 2
}
return compressionRatio;
});
});
},
getOcrText(filePath, file, type) {
return new Promise(async (resolve, reject) => {
this.loading = true;
//#ifdef APP-PLUS
filePath = await this.compressImage(filePath);
//#endif
return new Promise(async (resolve, reject) => {
this.loading = true;
// 压缩图片已base64 方式上传
//#ifdef H5
filePath = await H5compressImg(filePath, 0.75);
//#endif
const batchNoRes = await batchNoApi(filePath, file, type);
const batchNo = batchNoRes.batchNo;
@ -356,6 +322,17 @@ export default {
this.showBankDialog = true;
resolve(imgOcrRes?.data);
} else {
uni.showToast({
title: "银行号图片上传错误,请重新上传",
icon: "error",
duration: 2000,
});
this.form = {
branch_name: "",
account_number: "",
account_holder_name: "",
};
this.bankCardFiles = [];
reject(imgOcrRes);
}
@ -385,40 +362,6 @@ export default {
url: imgUrl,
};
let lists = [].concat(event.file);
let fileListLen = this[`fileList${event.name}`].length;
for (let index in lists) {
const group = lists[index];
const fileSize = group.size;
const fileName = group.name ?? '';
if(!this.isAssetTypeAnImage(group.name)) {
this.$.msg('不允许该文件类型上传');
return false
}
console.log('文件大小',fileSize);
if (fileSize > this.fileMaxSize) {
const compressionRatio = this.getCompressionRatio(fileSize);
if (compressionRatio > 1) {
this.$.msg('文件' + fileName + '大于5M');
return false
}
// 超出1M自动压缩图片
item = await this.handerCompressImg(item, compressionRatio)
if (item.size > this.maxSize) {
this.$.msg('文件' + fileName + '压缩后超出20M')
return false
}
}
if (item.size < this.fileMinSize) {
this.$.msg('文件' + fileName + '不能小于5KB');
return false
}
}
console.log(e);
this.currentBankFile = {
file: item,
path: imgUrl,

1
java-mall-app-shop-admin/pages/forgetPassword/forgetPassword.vue
View File

@ -65,6 +65,7 @@
:height="60"
:auto-height="true"
style="margin-bottom: 20rpx"
:maxlength="4"
>
<template slot="prefix">
<text class="input-label">验证码</text>

2
java-mall-app-shop-admin/pages/login/login.vue
View File

@ -54,6 +54,7 @@
:height="60"
:auto-height="true"
:placeholder-style="'color: #999999;'"
:maxlength="showPassWord() == 'number' ? 4 : 99"
>
<template slot="prefix">
<text class="input-label">
@ -98,6 +99,7 @@
:auto-height="true"
:placeholder-style="'color: #999999;'"
style="margin-bottom: 20rpx"
:maxlength="4"
>
<template slot="prefix">
<text class="input-label">验证码</text>

1
java-mall-app-shop-admin/pages/register/register.vue
View File

@ -35,6 +35,7 @@
:auto-height="true"
:placeholder-style="'color: #999999;'"
style="margin-bottom: 20rpx"
:maxlength="4"
>
<template slot="prefix">
<text class="input-label">验证码</text>

74
java-mall-app-shop-admin/utils/tool.js
View File

@ -4,44 +4,39 @@
* scale 压缩质量 0-1
* type 文件类型
*/
export function compressImg (imgSrc, scale, type, callback) {
// uni.$u.toast('压缩中')
var img = new Image();
img.src = imgSrc;
img.onload = function() {
var that = this;
var h = (img.height * scale).toFixed(0); // 默认按质量比例压缩
var w = (img.width * scale).toFixed(0);
var canvas = document.createElement('canvas');
var ctx = canvas.getContext('2d');
var width = document.createAttribute("width");
width.nodeValue = w;
export async function H5compressImg(imgSrc, scale) {
//imgSrc:图片的路径
//scale:缩放比例 0-1之间
return new Promise((reslove, reject) => {
var img = new Image(); //创建Image对象生成一个<img>标签
img.src = imgSrc; //将图片路径赋给<img>标签的src
img.onload = () => {
//onload在图片加载成功后触发，在onload中完成压缩功能
var h = img.height / 2; // 获取原本图片的宽高
var w = img.width / 2; //默认按比例压缩,根据需求修改
var canvas = document.createElement("canvas"); //创建画布
var ctx = canvas.getContext("2d"); //设置为2d效果
var width = document.createAttribute("width"); //创建属性节点
width.nodeValue = w; //设置属性值
var height = document.createAttribute("height");
height.nodeValue = h;
canvas.setAttributeNode(width);
canvas.setAttributeNode(width); //设置画布宽高
canvas.setAttributeNode(height);
ctx.drawImage(that, 0, 0, w, h);
var base64 = canvas.toDataURL('image/jpeg', scale); //压缩比例
canvas = null;
if (type == 'base64') {
let data = {
size: getBase64Size(base64),
type: type,
source: base64
}
callback(base64);
} else {
let blob = base64ToBlob(base64);
console.log('压缩后的大小', blob.size);
const blobUrl = window.URL.createObjectURL(blob); //blob地址
blob.source = blobUrl
callback(blob);
}
}
ctx.drawImage(img, 0, 0, w, h); //将图片贴到画布上
//img:图片 0,0:粘贴的位置 w,h:粘贴图片的大小
var base64 = canvas.toDataURL("image/png", scale);
//'image/png':压缩返回图片的类型 scale:图片质量
//如果要base64的流，可以直接将结果返回了
canvas = null; //清除画布
// var blob = base64ToBlob(base64); //需要二进制流调用该方法拿到
// let blobUrl = window.URL.createObjectURL(blob); //blob地址
reslove(base64);
};
});
}
/**base转Blob */
export function base64ToBlob(base64) {
var arr = base64.split(','),
var arr = base64.split(","),
mime = arr[0].match(/:(.*?);/)[1],
bstr = atob(arr[1]),
n = bstr.length,
@ -50,14 +45,15 @@ export function base64ToBlob (base64) {
u8arr[n] = bstr.charCodeAt(n);
}
return new Blob([u8arr], {
type: mime
type: mime,
});
};
}
/**获取base64的文件大小 */
export function getBase64Size () {
export function getBase64Size(base64Str) {
let size = 0;
if (base64Str) { // 获取base64图片byte大小
const equalIndex = base64Str.indexOf('='); // 获取=号下标
if (base64Str) {
// 获取base64图片byte大小
const equalIndex = base64Str.indexOf("="); // 获取=号下标
if (equalIndex > 0) {
const str = base64Str.substring(0, equalIndex); // 去除=号
const strLength = str.length;
@ -71,5 +67,5 @@ export function getBase64Size () {
} else {
size = null;
}
return size
};
return size;
}