From 20ef1d98b58ac24ae7de0e40111082a382f00abf Mon Sep 17 00:00:00 2001
From: Tevin <tingquanren@163.com>
Date: Sat, 19 Jun 2021 20:24:33 +0800
Subject: [PATCH] 实现图片压缩组件，第一部分、第二部分
---
forms/imagePicker/CImagePicker.vue | 50 ++++++++++++++++++++++++++++++++++++++++++++++++--
1 files changed, 48 insertions(+), 2 deletions(-)
diff --git a/forms/imagePicker/CImagePicker.vue b/forms/imagePicker/CImagePicker.vue
index dbca4bf..d69f25c 100644
--- a/forms/imagePicker/CImagePicker.vue
+++ b/forms/imagePicker/CImagePicker.vue
@@ -35,6 +35,7 @@
:src="curtainImg"
/>
</AtCurtain>
+ <CImageCompressor ref="compressor" />
</view>
</template>
@@ -43,11 +44,13 @@
import { $ } from '@tarojs/extend';
import { AtInput, AtImagePicker, AtCurtain } from 'taro-ui-vue';
import { $fetcherCommon } from '@fetchers/FCommon';
+import CImageCompressor from './CImageCompressor.vue';
import './cImagePicker.scss';
export default {
name: 'CImagePicker',
components: {
+ CImageCompressor,
AtInput,
AtImagePicker,
AtCurtain,
@@ -76,7 +79,7 @@
},
},
methods: {
- handleChange(files, operationType, index) {
+ triggerChange(files) {
const value = [];
files.forEach(file => {
if (file.type === 'btn') {
@@ -86,6 +89,48 @@
});
this.itemRes.onChange(value);
},
+ handleChange(files, operationType, index) {
+ // 添加图片
+ if (operationType === 'add') {
+ const needs = files
+ .map((file, index) => {
+ const fileInfo = file.file;
+ // 没有 file 信息对象，或者不是 blob 类型
+ if (!fileInfo || fileInfo.path.indexOf('blob') < 0) {
+ return false;
+ }
+ // 尺寸小于 2M 的图片
+ if (fileInfo.size < 1 * 1024 * 1024) {
+ return false;
+ }
+ return [fileInfo, index];
+ })
+ .filter(Boolean);
+ // 存在需要压缩的图片，一次性压缩
+ if (needs.length > 0) {
+ const files2 = [...files];
+ const needPath = needs.map(need => need[0].path);
+ this.$refs.compressor.$compress(needPath, compressedFiles => {
+ compressedFiles.forEach((cpFile, index) => {
+ const filesIndex = needs[index][1];
+ files2[filesIndex] = {
+ url: cpFile.path,
+ file: cpFile,
+ };
+ });
+ this.triggerChange(files2);
+ });
+ }
+ // 不存在，直接显示
+ else {
+ this.triggerChange(files);
+ }
+ }
+ // 删除图片，直接显示
+ else {
+ this.triggerChange(files);
+ }
+ },
handleImgView(index, file) {
this.curtainImg = file.url;
this.showImg = true;
@@ -94,6 +139,7 @@
this.showImg = false;
},
handleFail(msg) {
+ console.log(msg);
Taro.showToast({
title: msg,
icon: 'none',
@@ -109,7 +155,7 @@
if (file.type === 'btn') {
return;
}
- // blob 二进制文件才上传
+ // blob 临时文件才上传
if (file.url.indexOf('blob') >= 0) {
uploadTeam.push(
new Promise((resolve, reject) => {
--
Gitblit v1.9.1