feat: 统一后台与用户端图片与文件上传交互，支持点击放大预览、删除与多图批量多选上传

mpuniapp/components/image-uploader/image-uploader.uvue

@@ -0,0 +1,178 @@
+<template>
+  <view class="uploader-container">
+    <view class="uploader-grid">
+      <!-- 已选图片列表 -->
+      <view
+        v-for="(url, index) in state.images"
+        :key="index"
+        class="uploader-item"
+      >
+        <image
+          class="uploader-img"
+          :src="url"
+          mode="aspectFill"
+          @click="handlePreview(index)"
+        />
+        <view
+          v-if="!disabled"
+          class="uploader-delete-btn"
+          @click="handleDelete(index)"
+        >
+          <text class="uploader-delete-icon">×</text>
+        </view>
+      </view>
+
+      <!-- 上传卡片触发区 -->
+      <view
+        v-if="canAdd && !disabled"
+        class="uploader-trigger"
+        @click="handleChoose"
+      >
+        <text class="uploader-trigger-plus">+</text>
+        <text class="uploader-trigger-text">{{ state.uploading ? '上传中' : '添加图片' }}</text>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script setup lang="uts">
+import {
+  createImageUploaderState,
+  removeImageByIndex,
+  previewImageAt,
+  chooseAndUploadImages,
+  ImageUploaderState,
+} from './useImageUploader.uts';
+
+const props = withDefaults(
+  defineProps<{
+    modelValue?: string[];
+    multiple?: boolean;
+    maxCount?: number;
+    disabled?: boolean;
+  }>(),
+  {
+    modelValue: () => [] as string[],
+    multiple: false,
+    maxCount: 9,
+    disabled: false,
+  }
+);
+
+const emit = defineEmits<{
+  (e: 'update:modelValue', value: string[]): void;
+  (e: 'change', value: string[]): void;
+}>();
+
+const state = reactive(createImageUploaderState(props.modelValue));
+
+watch(
+  () => props.modelValue,
+  (newVal: string[]) => {
+    state.images = newVal != null ? newVal.slice() : [];
+  }
+);
+
+const canAdd = computed(() => {
+  const limit = props.multiple ? props.maxCount : 1;
+  return state.images.length < limit;
+});
+
+function handlePreview(index: number): void {
+  previewImageAt(state, index);
+}
+
+function handleDelete(index: number): void {
+  removeImageByIndex(state, index);
+  emit('update:modelValue', state.images);
+  emit('change', state.images);
+}
+
+async function handleChoose(): Promise<void> {
+  if (state.uploading || props.disabled) {
+    return;
+  }
+  const ok = await chooseAndUploadImages(state, {
+    multiple: props.multiple,
+    maxCount: props.multiple ? props.maxCount : 1,
+  });
+  if (ok) {
+    emit('update:modelValue', state.images);
+    emit('change', state.images);
+  }
+}
+</script>
+
+<style scoped>
+.uploader-container {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+}
+
+.uploader-grid {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  gap: 12px;
+}
+
+.uploader-item {
+  position: relative;
+  width: 80px;
+  height: 80px;
+  border-radius: 12px;
+  overflow: hidden;
+  border: 1px solid var(--oc-border, #E3E7ED);
+  background-color: var(--oc-surface, #F7F8FA);
+}
+
+.uploader-img {
+  width: 100%;
+  height: 100%;
+}
+
+.uploader-delete-btn {
+  position: absolute;
+  top: 4px;
+  right: 4px;
+  width: 20px;
+  height: 20px;
+  border-radius: 10px;
+  background-color: rgba(0, 0, 0, 0.6);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.uploader-delete-icon {
+  color: #FFFFFF;
+  font-size: 14px;
+  font-weight: 700;
+  line-height: 1;
+}
+
+.uploader-trigger {
+  width: 80px;
+  height: 80px;
+  border-radius: 12px;
+  border: 1px dashed var(--oc-border, #C9CDD4);
+  background-color: var(--oc-surface, #F7F8FA);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}
+
+.uploader-trigger-plus {
+  font-size: 24px;
+  color: var(--oc-text-2, #667085);
+  line-height: 1;
+  margin-bottom: 2px;
+}
+
+.uploader-trigger-text {
+  font-size: 11px;
+  color: var(--oc-text-2, #667085);
+}
+</style>

mpuniapp/components/image-uploader/useImageUploader.uts

@@ -0,0 +1,198 @@
+/**
+ * OmniCard AI (CRMmp) - 跨端统一图片上传核心业务驱动层 (UTS)
+ * 严格遵循 uts 强类型、零 emoji 与 AGENTS.md 约束
+ * 支持单图/多图上传、大图预览 (uni.previewImage)、独立删除与上限拦截
+ */
+
+export type ImageUploaderState = {
+  images: string[];
+  uploading: boolean;
+  errorMessage: string;
+};
+
+export type ChooseImageCallbackRes = {
+  tempFilePaths: string[];
+};
+
+export type ChooseImageOptions = {
+  count?: number;
+  sizeType?: string[];
+  sourceType?: string[];
+  success?: (res: ChooseImageCallbackRes) => void;
+  fail?: (err: unknown) => void;
+};
+
+export type ImageUploaderOptions = {
+  multiple?: boolean;
+  maxCount?: number;
+  sourceType?: string[];
+  chooseImageFn?: (options: ChooseImageOptions) => void;
+};
+
+/**
+ * 创建上传状态
+ */
+export function createImageUploaderState(initialImages?: string[]): ImageUploaderState {
+  return {
+    images: initialImages != null ? initialImages.slice() : [],
+    uploading: false,
+    errorMessage: '',
+  };
+}
+
+/**
+ * 追加图片 URL，并严格按 maxCount 截断
+ */
+export function addImageUrls(
+  state: ImageUploaderState,
+  urls: string[],
+  maxCount: number = 9
+): void {
+  const nextList: string[] = [];
+  for (let i = 0; i < state.images.length; i++) {
+    nextList.push(state.images[i]);
+  }
+  for (let j = 0; j < urls.length; j++) {
+    const url = urls[j].trim();
+    if (url !== '') {
+      nextList.push(url);
+    }
+  }
+  state.images = nextList.slice(0, maxCount);
+}
+
+/**
+ * 依据索引删除单张图片
+ */
+export function removeImageByIndex(
+  state: ImageUploaderState,
+  index: number
+): void {
+  if (index < 0 || index >= state.images.length) {
+    return;
+  }
+  const nextList: string[] = [];
+  for (let i = 0; i < state.images.length; i++) {
+    if (i !== index) {
+      nextList.push(state.images[i]);
+    }
+  }
+  state.images = nextList;
+}
+
+/**
+ * 清空所有图片
+ */
+export function clearAllImages(state: ImageUploaderState): void {
+  state.images = [];
+}
+
+/**
+ * 获取可用于全屏大图预览的 URL 数组
+ */
+export function resolvePreviewUrls(state: ImageUploaderState): string[] {
+  return state.images.slice();
+}
+
+/**
+ * 触发调用系统原生全屏大图放大预览
+ */
+export function previewImageAt(
+  state: ImageUploaderState,
+  currentUrlOrIndex: string | number
+): void {
+  const urls = resolvePreviewUrls(state);
+  if (urls.length === 0) {
+    return;
+  }
+  let current = '';
+  if (typeof currentUrlOrIndex === 'number') {
+    if (currentUrlOrIndex >= 0 && currentUrlOrIndex < urls.length) {
+      current = urls[currentUrlOrIndex];
+    } else {
+      current = urls[0];
+    }
+  } else {
+    current = currentUrlOrIndex;
+  }
+
+  // #ifndef UNI-APP-X-TEST
+  try {
+    if (typeof uni !== 'undefined' && typeof uni.previewImage === 'function') {
+      uni.previewImage({
+        urls,
+        current,
+      });
+    }
+  } catch (_e) {}
+  // #endif
+}
+
+/**
+ * 选择图片并执行上传流程
+ */
+export async function chooseAndUploadImages(
+  state: ImageUploaderState,
+  options?: ImageUploaderOptions
+): Promise<boolean> {
+  const opt = options != null ? options : {};
+  const multiple = opt.multiple !== undefined ? opt.multiple : false;
+  const maxCount = opt.maxCount !== undefined ? opt.maxCount : (multiple ? 9 : 1);
+  const remainingCount = maxCount - state.images.length;
+
+  if (remainingCount <= 0) {
+    state.errorMessage = '已达到上传上限';
+    return false;
+  }
+
+  const selectCount = multiple ? remainingCount : 1;
+  const sourceTypes = opt.sourceType != null && opt.sourceType.length > 0
+    ? opt.sourceType
+    : ['album', 'camera'];
+
+  state.uploading = true;
+  state.errorMessage = '';
+
+  return new Promise<boolean>((resolve) => {
+    const chooseFn = opt.chooseImageFn != null
+      ? opt.chooseImageFn
+      : (typeof uni !== 'undefined' && typeof uni.chooseImage === 'function' ? uni.chooseImage : null);
+
+    if (!chooseFn) {
+      state.uploading = false;
+      state.errorMessage = 'chooseImage 不可用';
+      resolve(false);
+      return;
+    }
+
+    try {
+      chooseFn({
+        count: selectCount,
+        sourceType: sourceTypes,
+        success: (res: ChooseImageCallbackRes) => {
+          if (res.tempFilePaths != null && res.tempFilePaths.length > 0) {
+            addImageUrls(state, res.tempFilePaths, maxCount);
+            state.uploading = false;
+            resolve(true);
+          } else {
+            state.uploading = false;
+            resolve(false);
+          }
+        },
+        fail: (err: unknown) => {
+          state.uploading = false;
+          let msg = '取消选择图片';
+          if (err instanceof Error) {
+            msg = err.message;
+          }
+          state.errorMessage = msg;
+          resolve(false);
+        },
+      });
+    } catch (e) {
+      state.uploading = false;
+      state.errorMessage = e instanceof Error ? e.message : '选择异常';
+      resolve(false);
+    }
+  });
+}