|
@@ -39,9 +39,12 @@
|
|
|
height="150" accept="file" :previewImage="false">
|
|
|
<view class="addfile flex"> <u-icon size="20" bold name="plus"></u-icon></view>
|
|
|
</u-upload>
|
|
|
- <u-upload :fileList="fileLists" @afterRead="afterRead" multiple :maxCount="9" width="80" height="80"
|
|
|
+ <view class="takephoto addfile flex" @click="takePhoto"> <u-icon size="20" bold
|
|
|
+ name="camera"></u-icon>
|
|
|
+ </view>
|
|
|
+ <!-- <u-upload :fileList="fileLists" @afterRead="afterRead" width="80" height="80"
|
|
|
accept="image" capture="camera" :previewImage="false">
|
|
|
- </u-upload>
|
|
|
+ </u-upload> -->
|
|
|
</u-form-item>
|
|
|
<view class="text-danger" style="font-size: 12px!important;">请确保上传图片内容清晰可见,所有涉密敏感信息不得上传</view>
|
|
|
<view class="other_info">
|
|
@@ -162,14 +165,17 @@
|
|
|
},
|
|
|
// 删除图片
|
|
|
deletePic(event) {
|
|
|
- this[`imgList${event.name}`].splice(event.index, 1)
|
|
|
- this[`fileLists${event.name}`].splice(event.index, 1)
|
|
|
+ this.imgList = this.imgList.filter(item => item.name != event.file.name)
|
|
|
+ this.fileLists = this.fileLists.filter(item => item.name != event.file.name)
|
|
|
},
|
|
|
// 图片压缩
|
|
|
- compressH5(urlData, targetSizeKB, initialQuality = 1.0) {
|
|
|
+ async compressH5(urlData, targetSizeKB, initialQuality = 1.0) {
|
|
|
const maxQuality = 1.0;
|
|
|
const minQuality = 0.0;
|
|
|
const tolerance = 0.01; // 根据需要调整公差
|
|
|
+ if (!urlData.url) {
|
|
|
+ this.$set(urlData, "url", urlData.path)
|
|
|
+ }
|
|
|
let that = this
|
|
|
return new Promise((resolve, reject) => {
|
|
|
let binarySearch = (min, max) => {
|
|
@@ -177,6 +183,7 @@
|
|
|
uni.getImageInfo({
|
|
|
src: urlData.url,
|
|
|
success(res) {
|
|
|
+ const reader = new FileReader();
|
|
|
let img = new Image()
|
|
|
img.src = res.path
|
|
|
img.onload = function() {
|
|
@@ -187,23 +194,32 @@
|
|
|
canvas.height = img.height;
|
|
|
|
|
|
ctx.clearRect(0, 0, canvas.width, canvas.height);
|
|
|
- ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
|
|
|
+ ctx.drawImage(img, 0, 0, canvas.width, canvas
|
|
|
+ .height);
|
|
|
|
|
|
// 使用异步的 toBlob 方法
|
|
|
canvas.toBlob(async (blob) => {
|
|
|
- const fileSizeKB = blob.size / 1024;
|
|
|
- if (Math.abs(fileSizeKB - targetSizeKB) <
|
|
|
- tolerance || max - min < tolerance) {
|
|
|
+ const fileSizeKB = blob.size /
|
|
|
+ 1024;
|
|
|
+ if (Math.abs(fileSizeKB -
|
|
|
+ targetSizeKB) <
|
|
|
+ tolerance || max - min <
|
|
|
+ tolerance) {
|
|
|
// 当前质量足够接近目标大小,使用当前质量解析
|
|
|
- const dataUrl = canvas.toDataURL(urlData.type, midQuality);
|
|
|
- let result = that
|
|
|
- .uploadFilePromise(dataUrl)
|
|
|
- setTimeout(() => {
|
|
|
- resolve(
|
|
|
- result)
|
|
|
- }, 1000)
|
|
|
-
|
|
|
- } else if (fileSizeKB > targetSizeKB) {
|
|
|
+ reader.readAsDataURL(blob);
|
|
|
+ uni.showToast({
|
|
|
+ title: blob.size
|
|
|
+ })
|
|
|
+ reader.onload = () => {
|
|
|
+ let result = that
|
|
|
+ .uploadFilePromise(reader
|
|
|
+ .result)
|
|
|
+ setTimeout(() => {
|
|
|
+ resolve(result)
|
|
|
+ }, 300)
|
|
|
+ }
|
|
|
+ } else if (fileSizeKB >
|
|
|
+ targetSizeKB) {
|
|
|
// 如果文件大小太大,降低质量,继续二分查找
|
|
|
binarySearch(min, midQuality);
|
|
|
} else {
|
|
@@ -212,13 +228,6 @@
|
|
|
}
|
|
|
}, urlData.type, midQuality);
|
|
|
};
|
|
|
- },
|
|
|
- fail() {
|
|
|
- uni.showModal({
|
|
|
- title: '提示',
|
|
|
- content: '图片压缩失败',
|
|
|
- showCancel: false
|
|
|
- });
|
|
|
}
|
|
|
})
|
|
|
}
|
|
@@ -226,11 +235,49 @@
|
|
|
binarySearch(minQuality, maxQuality);
|
|
|
})
|
|
|
},
|
|
|
+ // 拍照
|
|
|
+ takePhoto() {
|
|
|
+ let that = this
|
|
|
+ // 调用uniapp的chooseImage API 选择图片
|
|
|
+ uni.chooseImage({
|
|
|
+ count: 1, // 默认9, 设置图片的数量
|
|
|
+ sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图,默认二者都有
|
|
|
+ sourceType: ['camera'], // 可以指定来源是相册还是相机,默认二者都有
|
|
|
+ success: (chooseImageRes) => {
|
|
|
+ uni.showLoading({
|
|
|
+ title: "上传中"
|
|
|
+ })
|
|
|
+
|
|
|
+ const tempFilePaths = chooseImageRes.tempFiles[0];
|
|
|
+ // 成功选择图片后进行压缩处理
|
|
|
+ that.compressH5(tempFilePaths, 150).then(result =>{
|
|
|
+ const fileName = result.split(/[/\\=]/).pop();
|
|
|
+ let item1 = {
|
|
|
+ name: fileName,
|
|
|
+ url: BASE_URL + result
|
|
|
+ }
|
|
|
+ let item = {
|
|
|
+ name: fileName,
|
|
|
+ url: result
|
|
|
+ }
|
|
|
+ that.fileLists.push(item)
|
|
|
+ that.imgList.push(item1)
|
|
|
+ uni.hideLoading()
|
|
|
+ })
|
|
|
+
|
|
|
+ },
|
|
|
+ fail: (error) => {
|
|
|
+ console.log('Error while choosing image:', error);
|
|
|
+ uni.hideLoading()
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
// 新增图片
|
|
|
async afterRead(event) {
|
|
|
uni.showLoading({
|
|
|
title: "上传中"
|
|
|
})
|
|
|
+
|
|
|
// 当设置 multiple 为 true 时, file 为数组格式,否则为对象格式
|
|
|
let lists = [].concat(event.file)
|
|
|
let fileListLen = this.fileLists.length
|
|
@@ -243,14 +290,16 @@
|
|
|
})
|
|
|
for (let i = 0; i < lists.length; i++) {
|
|
|
let result = ""
|
|
|
+
|
|
|
if (isImageFormat(lists[i].name)) {
|
|
|
if (lists[i].size > (200 * 1024)) {
|
|
|
-
|
|
|
result = await this.compressH5(lists[i], 150);
|
|
|
} else {
|
|
|
result = await this.uploadFilePromise(lists[i].url)
|
|
|
}
|
|
|
+ const fileName = result.split(/[/\\=]/).pop();
|
|
|
let item1 = {
|
|
|
+ name: fileName,
|
|
|
url: BASE_URL + result
|
|
|
}
|
|
|
this.imgList.push(item1)
|
|
@@ -265,17 +314,19 @@
|
|
|
this.fileList.push(a)
|
|
|
}
|
|
|
let item = this.fileLists[fileListLen]
|
|
|
+ item.name = result.split(/[/\\=]/).pop();
|
|
|
this.fileLists.splice(fileListLen, 1, Object.assign(item, {
|
|
|
status: 'success',
|
|
|
message: '',
|
|
|
url: result
|
|
|
}))
|
|
|
+
|
|
|
fileListLen++
|
|
|
}
|
|
|
uni.hideLoading()
|
|
|
},
|
|
|
async uploadFilePromise(param) {
|
|
|
-
|
|
|
+
|
|
|
return new Promise((resolve, reject) => {
|
|
|
|
|
|
let a = uni.uploadFile({
|
|
@@ -288,7 +339,7 @@
|
|
|
success: (res) => {
|
|
|
setTimeout(() => {
|
|
|
resolve(res.data)
|
|
|
- }, 1000)
|
|
|
+ }, 300)
|
|
|
}
|
|
|
})
|
|
|
});
|
|
@@ -302,7 +353,7 @@
|
|
|
// 表单提交
|
|
|
formSubmit() {
|
|
|
this.loading = true
|
|
|
- let auditForm = Object.assign({}, this.inputForm);
|
|
|
+ let auditForm = Object.assign({}, this.inputForm);
|
|
|
let files = []
|
|
|
this.fileLists.forEach(item => {
|
|
|
files.push(item.url)
|
|
@@ -356,9 +407,11 @@
|
|
|
.main_info {
|
|
|
margin-top: 15px;
|
|
|
}
|
|
|
- .u-form-item__body__right__message span{
|
|
|
- font-size: 12px!important;
|
|
|
+
|
|
|
+ .u-form-item__body__right__message span {
|
|
|
+ font-size: 12px !important;
|
|
|
}
|
|
|
+
|
|
|
.submit_btn {
|
|
|
background-color: #fefefe;
|
|
|
margin-top: 20px;
|
|
@@ -382,6 +435,10 @@
|
|
|
margin: 10px;
|
|
|
}
|
|
|
|
|
|
+ .takephoto {
|
|
|
+ padding-left: 9%;
|
|
|
+ }
|
|
|
+
|
|
|
.other_info {
|
|
|
width: 100%;
|
|
|
}
|