From 0396d398bea811f5650d04ce5b55a232b4f58b98 Mon Sep 17 00:00:00 2001
From: Tevin <tingquanren@163.com>
Date: Thu, 27 Mar 2025 17:07:52 +0800
Subject: [PATCH] 移除 link-rules
---
forms/imagePicker/CImagePicker.vue | 104 +++++++++++++++++++++++++++++++++++++++-------------
1 files changed, 78 insertions(+), 26 deletions(-)
diff --git a/forms/imagePicker/CImagePicker.vue b/forms/imagePicker/CImagePicker.vue
index 6ebd882..395efa8 100644
--- a/forms/imagePicker/CImagePicker.vue
+++ b/forms/imagePicker/CImagePicker.vue
@@ -1,5 +1,8 @@
/**
* CImagePicker
+ * 图片选择器组件，用于在表单中上传和管理图片
+ * 支持单张和多张图片上传，并提供压缩、预览等功能
+ * 可限制上传图片的数量和来源（相册/相机）
* @author Tevin
*/
@@ -15,16 +18,18 @@
<AtImagePicker
ref="picker"
mode="aspectFit"
+ :sourceType="sourceType"
:multiple="count > 1"
:count="count"
:showAddBtn="!selectedFull"
:length="3"
:files="files"
- :onChange="(files,operationType,index)=>handleChange(files,operationType,index)"
- :onFail="evt=>handleFail(evt)"
- :onImageClick="(index, file)=>handleImgView(index,file)"
+ :onChange="(files,operationType,index) => handleChange(files,operationType,index)"
+ :onFail="evt => handleFail(evt)"
+ :onImageClick="(index, file) => handleImgView(index,file)"
/>
<CImageCompressor ref="compressor" />
+ <CImagePreview ref="imgPreview" />
</view>
</template>
@@ -36,12 +41,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,
@@ -53,6 +60,26 @@
count: {
type: Number,
default: 1,
+ },
+ // 图片来源
+ sourceType: {
+ type: Array,
+ default: () => ['album', 'camera'],
+ },
+ // 上传图片参数
+ params: {
+ type: Object,
+ default: () => {},
+ },
+ // 是否开启缩略图
+ needThumb: {
+ type: Boolean,
+ default: false,
+ },
+ // 上传地址来源
+ uploadUrlSource: {
+ type: String,
+ default: '',
},
},
data() {
@@ -96,7 +123,7 @@
if (file.file && file.file.originalFileObj) {
if (
/image\/(gif|png|jpg|jpeg)/.test(
- file.file.originalFileObj.type
+ file.file.originalFileObj.type,
)
) {
return true;
@@ -119,8 +146,13 @@
const needs = nextFiles
.map((file, needIndex) => {
const fileInfo = file.file;
- // 没有 file 信息对象，或者不是 blob 类型
- if (!fileInfo || fileInfo.path.indexOf('blob') < 0) {
+ // 没有 file 信息对象，或者不是 blob、wxfile、tmp 类型
+ if (
+ !fileInfo ||
+ (fileInfo.path.indexOf('blob') < 0 &&
+ fileInfo.path.indexOf('wxfile') < 0 &&
+ fileInfo.path.indexOf('http://tmp/') < 0)
+ ) {
return false;
}
// 尺寸小于 1M 的图片
@@ -158,7 +190,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链接列表
});
@@ -186,16 +219,24 @@
file.fileName = this.fileNames[file.url];
files.push(file);
});
- uploadImage(files, (state, res) => {
- if (state === 'success') {
- this.itemRes.onChange(res);
- setTimeout(() => {
- callback(state);
- }, 10);
- } else if (state === 'error') {
- callback(state, res);
- }
- });
+ uploadImage(
+ files,
+ (state, res) => {
+ if (state === 'success') {
+ this.itemRes.onChange(res);
+ setTimeout(() => {
+ callback(state);
+ }, 10);
+ } else if (state === 'error') {
+ callback(state, res);
+ }
+ },
+ $fetchCommon.transKeyName('underline', {
+ ...this.params,
+ needThumb: this.needThumb ? 1 : 0,
+ }),
+ this.uploadUrlSource,
+ );
},
},
mounted() {
@@ -214,12 +255,12 @@
// 图片上传节流
const _readyUpload = {};
-export const uploadImage = (files, callback) => {
+export const uploadImage = (files, callback, formData = {}, uploadUrlSource) => {
if (!files || files.length === 0) {
callback('success', []);
return;
}
- let url = $fetchCommon.getUploadImgURL();
+ let url = uploadUrlSource ? uploadUrlSource : $fetchCommon.getUploadImgURL();
if (url.indexOf('http') < 0) {
url = $hostBoot.getHost() + url;
}
@@ -258,17 +299,28 @@
...requestFile,
header,
name: 'file',
- formData: {},
+ formData,
+ timeout: 30 * 1000,
success(res) {
- const res2 =
- typeof res.data === 'string'
- ? JSON.parse(res.data)
- : res.data;
+ let res2;
+ try {
+ res2 =
+ typeof res.data === 'string'
+ ? JSON.parse(res.data)
+ : res.data;
+ } catch (err) {
+ reject({
+ ...requestFile,
+ response: res,
+ message: '上传图片异常！',
+ });
+ return;
+ }
// 上传成功
if (res2.state.code === 2000) {
const imgUrl = $fetchCommon.transImgPath(
'fix',
- res2.data.src || res2.data.file || res2.data.url
+ res2.data.src || res2.data.file || res2.data.url,
);
_readyUpload[file.url] = imgUrl;
resolve(imgUrl);
@@ -295,7 +347,7 @@
});
},
});
- })
+ }),
);
}
// 其他类型视为 url，忽略
--
Gitblit v1.9.1