Skip to content

T
techbook
Commit c622387c authored by zhangyanni's avatar zhangyanni
Browse files
Options

个人认证提交图片压缩

parent 827affdd
Hide whitespace changes
Inline Side-by-side
Showing with 100 additions and 16 deletions
src/views/mobile/auth/addAuth.vue
View file @ c622387c
...@@ -60,6 +60,7 @@ ...@@ -60,6 +60,7 @@
<div class="uploadImg"> <div class="uploadImg">
<el-upload <el-upload
ref="upload"
name="fileUpload" name="fileUpload"
:limit="1" :limit="1"
:on-exceed="handleExceed" :on-exceed="handleExceed"
...@@ -70,7 +71,7 @@ ...@@ -70,7 +71,7 @@
:file-list="fileList" :file-list="fileList"
:on-preview="handlePictureCardPreview" :on-preview="handlePictureCardPreview"
:on-success="uploadComplete" :on-success="uploadComplete"
:before-upload="handleBeforeFile" :before-upload="handleBeforeFile1"
:on-remove="handleRemove" :on-remove="handleRemove"
:disabled="detailInfo.auditState!='AS01'&&detailInfo.auditState==null" :disabled="detailInfo.auditState!='AS01'&&detailInfo.auditState==null"
> >
...@@ -124,7 +125,7 @@ ...@@ -124,7 +125,7 @@
import 'babel-polyfill'; // es6 shim import 'babel-polyfill'; // es6 shim
import imageCrop from '../../../components/mobile/imgCrop'; import imageCrop from '../../../components/mobile/imgCrop';
import lrz from 'lrz' import lrz from 'lrz'
import imageConversion from 'image-conversion' import 'image-conversion'
// import Exif from '../../../../public/js/exif'; // import Exif from '../../../../public/js/exif';
export default { export default {
name: "addAuth", name: "addAuth",
...@@ -375,8 +376,90 @@ ...@@ -375,8 +376,90 @@
}, },
//附件上传之前判断文件格式 //附件上传之前判断文件格式
handleBeforeFile(file) { // handleBeforeFile(file) {
var nameArr = file.name.split('.'); // var nameArr = file.name.split('.');
// const isPng = nameArr[nameArr.length - 1] === 'png';
// const isJpg = nameArr[nameArr.length - 1] === 'jpg';
// // const isJpeg = nameArr[nameArr.length - 1] === 'jpeg';
// const isPNG = nameArr[nameArr.length - 1] === 'PNG';
// const isJPG = nameArr[nameArr.length - 1] === 'JPG';
// // const isJPEG = nameArr[nameArr.length - 1] === 'JPEG';
// const isLt2M = file.size / 1024 / 1024 <= 2;
// if (!isPNG && !isJPG && !isPng && !isJpg) {
// this.isShowErrorText1 = false;
// this.isShowErrorText2 = true;
// this.isShowErrorText3 = false;
// this.isShowErrorText4 = false;
// this.isShowErrorText5 = false;
// // this.$toast('上传图片只能是 png，jpg 格式!');
// return false;
// }
// if (!isLt2M) {
// // this.isShowErrorText1 = false;
// // this.isShowErrorText2 = false;
// // this.isShowErrorText3 = true;
// // this.isShowErrorText4 = false;
// // this.isShowErrorText5 = false;
// // this.$toast('上传图片大小不能超过 2MB!');
// // return false;
// console.log(file)
// imageConversion.compressAccurately(file, 400).then(res => { // console.log(res)
// console.log(res)
// })
// // return new Promise((resolve, reject) => {
// //
// // });
// } else {
// console.log(1)
// this.flag = 1;
// this.isShowErrorText1 = false;
// this.isShowErrorText2 = false;
// this.isShowErrorText3 = false;
// this.isShowErrorText4 = false;
// this.isShowErrorText5 = false;
// }
// // return isPNG || isJPG || isPng || isJpg || isLt2M;
// },
/* 图片压缩方法-canvas压缩 */
compressUpload(image) {
let canvas = document.createElement('canvas')
let ctx = canvas.getContext('2d')
let initSize = image.src.length
let {width} = image, {height} = image
canvas.width = width
canvas.height = height
ctx.fillRect(0, 0, canvas.width, canvas.height)
ctx.drawImage(image, 0, 0, width, height)
// 进行最小压缩0.1
let compressData = canvas.toDataURL('image/jpeg', 0.1)
// 压缩后调用方法进行base64转Blob，方法写在下边
let blobImg = this.dataURItoBlob(compressData)
return blobImg
},
/* base64转Blob对象 */
dataURItoBlob(data) {
let byteString;
if(data.split(',')[0].indexOf('base64') >= 0) {
byteString = atob(data.split(',')[1])
}else {
byteString = unescape(data.split(',')[1])
}
let mimeString = data
.split(',')[0]
.split(':')[1]
.split(';')[0];
let ia = new Uint8Array(byteString.length)
for( let i = 0; i < byteString.length; i += 1) {
ia[i] = byteString.charCodeAt(i)
}
return new Blob([ia], {type: mimeString})
},
handleBeforeFile1(file) {
var nameArr = file.name.split('.'),that = this;
const isPng = nameArr[nameArr.length - 1] === 'png'; const isPng = nameArr[nameArr.length - 1] === 'png';
const isJpg = nameArr[nameArr.length - 1] === 'jpg'; const isJpg = nameArr[nameArr.length - 1] === 'jpg';
// const isJpeg = nameArr[nameArr.length - 1] === 'jpeg'; // const isJpeg = nameArr[nameArr.length - 1] === 'jpeg';
...@@ -394,18 +477,18 @@ ...@@ -394,18 +477,18 @@
return false; return false;
} }
if (!isLt2M) { if (!isLt2M) {
// this.isShowErrorText1 = false; return new Promise((resolve,reject)=>{
// this.isShowErrorText2 = false; let image = new Image(), resultBlob = '';
// this.isShowErrorText3 = true; image.src = URL.createObjectURL(file);
// this.isShowErrorText4 = false; image.onload = () => {
// this.isShowErrorText5 = false; // 调用方法获取blob格式，方法写在下边
// this.$toast('上传图片大小不能超过 2MB!'); resultBlob = that.compressUpload(image);
// return false; resolve(resultBlob)
return new Promise((resolve, reject) => { }
imageConversion.compressAccurately(file, 400).then(res => { // console.log(res) image.onerror = () => {
resolve(res); reject()
}) }
}); })
} else { } else {
this.flag = 1; this.flag = 1;
this.isShowErrorText1 = false; this.isShowErrorText1 = false;
...@@ -414,6 +497,7 @@ ...@@ -414,6 +497,7 @@
this.isShowErrorText4 = false; this.isShowErrorText4 = false;
this.isShowErrorText5 = false; this.isShowErrorText5 = false;
} }
// return isPNG || isJPG || isPng || isJpg || isLt2M; // return isPNG || isJPG || isPng || isJpg || isLt2M;
}, },
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment