From 9fd5c7103798b275e151260b82cae796f8d426a6 Mon Sep 17 00:00:00 2001
From: Tevin <tingquanren@163.com>
Date: Fri, 23 Sep 2022 21:25:52 +0800
Subject: [PATCH] 修复上传图片预览，图片缩放的问题
---
forms/imagePicker/CImagePicker.vue | 60 +++++++++++++++++++++++++++++++++++++++++++++---------------
1 files changed, 45 insertions(+), 15 deletions(-)
diff --git a/forms/imagePicker/CImagePicker.vue b/forms/imagePicker/CImagePicker.vue
index 32d9017..fc22f85 100644
--- a/forms/imagePicker/CImagePicker.vue
+++ b/forms/imagePicker/CImagePicker.vue
@@ -25,6 +25,7 @@
:onImageClick="(index, file)=>handleImgView(index,file)"
/>
<CImageCompressor ref="compressor" />
+ <CImagePreview ref="imgPreview" />
</view>
</template>
@@ -36,12 +37,14 @@
import { $fetchCommon } from '@fetchers/FCommon';
import { Tools } from '@components/common/Tools';
import CImageCompressor from './CImageCompressor.vue';
+import CImagePreview from './CImagePreview.vue';
import './cImagePicker.scss';
export default {
name: 'CImagePicker',
components: {
CImageCompressor,
+ CImagePreview,
AtInput,
AtImagePicker,
AtCurtain,
@@ -158,7 +161,8 @@
const urls = this.files
.map(file => (file.type === 'btn' ? false : file.url))
.filter(Boolean);
- Taro.previewImage({
+ // 图片预览，支持H5模式下的双指缩放
+ this.$refs.imgPreview.$preview({
current: file.url, // 当前显示图片的http链接
urls, // 需要预览的图片http链接列表
});
@@ -211,9 +215,13 @@
},
};
+// 图片上传节流
+const _readyUpload = {};
+
export const uploadImage = (files, callback) => {
if (!files || files.length === 0) {
callback('success', []);
+ return;
}
let url = $fetchCommon.getUploadImgURL();
if (url.indexOf('http') < 0) {
@@ -228,7 +236,7 @@
file.url.indexOf('wxfile') >= 0 ||
file.url.indexOf('http://tmp/') >= 0
) {
- let header = {};
+ const header = {};
if (process.env.TARO_ENV === 'weapp') {
const localCookies = JSON.parse(Taro.getStorageSync('cookies') || '{}');
const cookiesArr = [];
@@ -237,13 +245,22 @@
});
header['Cookie'] = cookiesArr.join('; ');
}
+ const requestFile = {
+ url,
+ filePath: file.url,
+ fileName: file.fileName || '',
+ };
uploadTeam.push(
new Promise((resolve, reject) => {
+ // 如果本次已上传过，直接返回地址
+ if (_readyUpload[file.url] && _readyUpload[file.url].length > 5) {
+ resolve(_readyUpload[file.url]);
+ return;
+ }
+ // 上传
Taro.uploadFile({
- url,
+ ...requestFile,
header,
- filePath: file.url,
- fileName: file.fileName || '',
name: 'file',
formData: {},
success(res) {
@@ -251,22 +268,35 @@
typeof res.data === 'string'
? JSON.parse(res.data)
: res.data;
+ // 上传成功
if (res2.state.code === 2000) {
- resolve(
- $fetchCommon.transImgPath(
- 'fix',
- res2.data.src || res2.data.file || res2.data.url
- )
+ const imgUrl = $fetchCommon.transImgPath(
+ 'fix',
+ res2.data.src || res2.data.file || res2.data.url
);
- } else {
- reject({ message: res2.state.msg });
+ _readyUpload[file.url] = imgUrl;
+ resolve(imgUrl);
+ }
+ // 上传失败
+ else {
+ reject({
+ ...requestFile,
+ response: res2,
+ message: res2.state.msg,
+ });
}
},
- cancel() {
- reject({ message: '上传图片已取消！' });
+ cancel(err) {
+ reject({
+ ...requestFile,
+ message: '上传图片已取消！',
+ });
},
fail() {
- reject({ message: '上传图片失败！' });
+ reject({
+ ...requestFile,
+ message: '上传图片失败！',
+ });
},
});
})
--
Gitblit v1.9.1