foucui 1.0.1

package/components/QiuUpload/index.vue

@@ -0,0 +1,628 @@
+<template>
+  <div
+    class="qiu-upload"
+    :class="{
+      'is-disabled': disabled,
+      [`qiu-upload--${listType}`]: true,
+      'is-dragover': dragOver,
+    }"
+  >
+    <input
+      ref="inputRef"
+      class="qiu-upload__input"
+      type="file"
+      :accept="accept"
+      :multiple="multiple"
+      :disabled="disabled"
+      @change="onInputChange"
+    />
+
+    <div v-if="listType === 'picture-card'" class="qiu-upload__card-list">
+      <div
+        v-for="item in fileList"
+        :key="item.uid"
+        class="qiu-upload__card"
+        :style="cardStyle"
+      >
+        <img
+          v-if="showPreview && previewSrc(item)"
+          :src="previewSrc(item)!"
+          class="qiu-upload__card-img"
+          alt=""
+        />
+        <div v-else class="qiu-upload__card-name">{{ item.name }}</div>
+        <div v-if="item.status === 'uploading'" class="qiu-upload__card-progress">
+          {{ item.percentage || 0 }}%
+        </div>
+        <button type="button" class="qiu-upload__card-remove" :disabled="disabled" @click="removeFile(item)">
+          ×
+        </button>
+      </div>
+      <button
+        v-if="!disabled && (!limit || fileList.length < limit)"
+        type="button"
+        class="qiu-upload__card-trigger"
+        :style="cardStyle"
+        @click="openPicker"
+      >
+        <qiu-icon icon="add-line" />
+        <span>上传</span>
+      </button>
+    </div>
+
+    <template v-else>
+      <div
+        v-if="drag"
+        class="qiu-upload__dragger"
+        @click="openPicker"
+        @dragover.prevent="onDragOver"
+        @dragleave.prevent="onDragLeave"
+        @drop.prevent="onDrop"
+      >
+        <qiu-icon icon="upload-cloud-2-line" class="qiu-upload__drag-icon" />
+        <p>将文件拖到此处，或 <em>点击上传</em></p>
+        <p v-if="tip" class="qiu-upload__tip">{{ tip }}</p>
+      </div>
+      <div v-else class="qiu-upload__trigger">
+        <qiu-button type="primary" :disabled="disabled" icon="upload-2-line" @click="openPicker">
+          {{ buttonText }}
+        </qiu-button>
+        <p v-if="tip" class="qiu-upload__tip">{{ tip }}</p>
+      </div>
+
+      <ul v-if="fileList.length" class="qiu-upload__list">
+        <li v-for="item in fileList" :key="item.uid" class="qiu-upload__item">
+          <div class="qiu-upload__item-main">
+            <img
+              v-if="showPreview && previewSrc(item)"
+              :src="previewSrc(item)!"
+              class="qiu-upload__thumb"
+              :style="thumbStyle"
+              alt=""
+            />
+            <qiu-icon v-else :icon="isImage(item.name) ? 'image-line' : 'file-line'" />
+            <span class="qiu-upload__name" :title="item.name">{{ item.name }}</span>
+            <span class="qiu-upload__size">{{ formatSize(item.size) }}</span>
+            <button type="button" class="qiu-upload__remove" :disabled="disabled" @click="removeFile(item)">
+              <qiu-icon icon="close-line" />
+            </button>
+          </div>
+          <div v-if="item.status === 'uploading'" class="qiu-upload__progress">
+            <div class="qiu-upload__progress-bar" :style="{ width: `${item.percentage || 0}%` }" />
+          </div>
+          <div v-else-if="item.status === 'fail'" class="qiu-upload__fail">上传失败</div>
+          <pre v-if="showResponse && item.response != null" class="qiu-upload__response">{{ formatResponse(item.response) }}</pre>
+        </li>
+      </ul>
+    </template>
+  </div>
+</template>
+
+<script lang="ts" setup>
+/**
+ * QiuUpload — 自研上传（事件模式 / action HTTP）
+ * 支持实时预览开关、返回内容展示、自动缩略图
+ */
+defineOptions({ name: 'QiuUpload' })
+
+export type QiuUploadFile = {
+  uid: number
+  name: string
+  size: number
+  raw?: File
+  url?: string
+  /** 缩略图（blob/dataURL） */
+  thumbnail?: string
+  status?: 'ready' | 'uploading' | 'success' | 'fail'
+  percentage?: number
+  response?: unknown
+}
+
+const props = withDefaults(
+  defineProps<{
+    modelValue?: QiuUploadFile[]
+    accept?: string
+    multiple?: boolean
+    limit?: number
+    disabled?: boolean
+    drag?: boolean
+    listType?: 'text' | 'picture-card'
+    buttonText?: string
+    tip?: string
+    autoUpload?: boolean
+    action?: string
+    headers?: Record<string, string>
+    name?: string
+    data?: Record<string, string | Blob>
+    withCredentials?: boolean
+    /** 是否显示实时图片预览 */
+    showPreview?: boolean
+    /** 上传成功后是否展示返回内容 */
+    showResponse?: boolean
+    /** 是否自动生成缩略图 */
+    autoThumbnail?: boolean
+    /** 缩略图边长（px） */
+    thumbnailSize?: number
+    /** 缩略图压缩质量 0.1~1（控制体积，便于存储） */
+    outputQuality?: number
+    /** 缩略图输出格式 */
+    thumbnailType?: 'image/jpeg' | 'image/webp' | 'image/png'
+  }>(),
+  {
+    modelValue: () => [],
+    accept: '',
+    multiple: false,
+    limit: 0,
+    disabled: false,
+    drag: false,
+    listType: 'text',
+    buttonText: '点击上传',
+    tip: '',
+    autoUpload: true,
+    action: '',
+    headers: () => ({}),
+    name: 'file',
+    data: () => ({}),
+    withCredentials: false,
+    showPreview: true,
+    showResponse: false,
+    autoThumbnail: false,
+    thumbnailSize: 64,
+    outputQuality: 0.85,
+    thumbnailType: 'image/jpeg',
+  }
+)
+
+const emit = defineEmits<{
+  'update:modelValue': [QiuUploadFile[]]
+  change: [file: QiuUploadFile, fileList: QiuUploadFile[]]
+  remove: [file: QiuUploadFile, fileList: QiuUploadFile[]]
+  exceed: [files: File[], fileList: QiuUploadFile[]]
+  success: [response: unknown, file: QiuUploadFile, fileList: QiuUploadFile[]]
+  error: [error: Error, file: QiuUploadFile, fileList: QiuUploadFile[]]
+  progress: [percent: number, file: QiuUploadFile, fileList: QiuUploadFile[]]
+}>()
+
+const inputRef = ref<HTMLInputElement | null>(null)
+const dragOver = ref(false)
+const fileList = ref<QiuUploadFile[]>([...props.modelValue])
+let uidSeed = Date.now()
+
+watch(
+  () => props.modelValue,
+  (v) => {
+    fileList.value = [...(v || [])]
+  }
+)
+
+const sync = () => emit('update:modelValue', [...fileList.value])
+
+const thumbStyle = computed(() => {
+  const s = Math.max(24, props.thumbnailSize || 64)
+  return { width: `${s}px`, height: `${s}px` }
+})
+
+const cardStyle = computed(() => {
+  const s = Math.max(64, props.thumbnailSize || 100)
+  return { width: `${s}px`, height: `${s}px` }
+})
+
+const formatSize = (size = 0) => {
+  if (size < 1024) return `${size} B`
+  if (size < 1024 * 1024) return `${(size / 1024).toFixed(1)} KB`
+  return `${(size / 1024 / 1024).toFixed(1)} MB`
+}
+
+const isImage = (name: string) => /\.(png|jpe?g|gif|webp|bmp|svg)$/i.test(name)
+
+const previewSrc = (item: QiuUploadFile) => {
+  if (!props.showPreview) return ''
+  if (!isImage(item.name) && !item.url) return ''
+  return item.thumbnail || item.url || ''
+}
+
+const formatResponse = (res: unknown) => {
+  if (typeof res === 'string') return res
+  try {
+    return JSON.stringify(res, null, 2)
+  } catch {
+    return String(res)
+  }
+}
+
+/** 从响应中尝试提取图片 URL */
+const pickUrlFromResponse = (response: unknown): string => {
+  if (!response) return ''
+  if (typeof response === 'string' && /^https?:|^\/|blob:|data:/i.test(response)) return response
+  if (typeof response === 'object' && response) {
+    const o = response as Record<string, any>
+    return (
+      o.url ||
+      o.data?.url ||
+      o.result?.url ||
+      o.path ||
+      o.data?.path ||
+      ''
+    )
+  }
+  return ''
+}
+
+const makeThumbnail = (file: File, size: number): Promise<string> =>
+  new Promise((resolve) => {
+    if (!file.type.startsWith('image/')) {
+      resolve('')
+      return
+    }
+    const img = new Image()
+    const src = URL.createObjectURL(file)
+    img.onload = () => {
+      const canvas = document.createElement('canvas')
+      const scale = Math.min(size / img.width, size / img.height, 1)
+      const w = Math.max(1, Math.round(img.width * scale))
+      const h = Math.max(1, Math.round(img.height * scale))
+      canvas.width = w
+      canvas.height = h
+      const ctx = canvas.getContext('2d')
+      if (props.thumbnailType === 'image/jpeg' || props.thumbnailType === 'image/webp') {
+        ctx?.fillRect(0, 0, w, h)
+      }
+      ctx?.drawImage(img, 0, 0, w, h)
+      URL.revokeObjectURL(src)
+      try {
+        resolve(canvas.toDataURL(props.thumbnailType, props.outputQuality))
+      } catch {
+        resolve('')
+      }
+    }
+    img.onerror = () => {
+      URL.revokeObjectURL(src)
+      resolve('')
+    }
+    img.src = src
+  })
+
+const openPicker = () => {
+  if (props.disabled) return
+  inputRef.value?.click()
+}
+
+const onDragOver = () => {
+  if (!props.disabled) dragOver.value = true
+}
+const onDragLeave = () => {
+  dragOver.value = false
+}
+const onDrop = (e: DragEvent) => {
+  dragOver.value = false
+  if (props.disabled) return
+  addFiles(Array.from(e.dataTransfer?.files || []))
+}
+
+const onInputChange = (e: Event) => {
+  const input = e.target as HTMLInputElement
+  const files = Array.from(input.files || [])
+  input.value = ''
+  addFiles(files)
+}
+
+const addFiles = async (files: File[]) => {
+  if (!files.length) return
+  if (props.limit && fileList.value.length + files.length > props.limit) {
+    emit('exceed', files, [...fileList.value])
+    return
+  }
+  for (const raw of files) {
+    const item: QiuUploadFile = {
+      uid: ++uidSeed,
+      name: raw.name,
+      size: raw.size,
+      raw,
+      url: isImage(raw.name) ? URL.createObjectURL(raw) : undefined,
+      status: 'ready',
+      percentage: 0,
+    }
+    if (props.autoThumbnail && isImage(raw.name)) {
+      item.thumbnail = await makeThumbnail(raw, props.thumbnailSize)
+    }
+    fileList.value.push(item)
+    sync()
+    emit('change', item, [...fileList.value])
+    if (props.autoUpload) uploadFile(item)
+  }
+}
+
+const removeFile = (file: QiuUploadFile) => {
+  if (props.disabled) return
+  if (file.url?.startsWith('blob:')) URL.revokeObjectURL(file.url)
+  fileList.value = fileList.value.filter((f) => f.uid !== file.uid)
+  sync()
+  emit('remove', file, [...fileList.value])
+}
+
+const uploadFile = (file: QiuUploadFile) => {
+  if (!file.raw) return
+  if (!props.action) {
+    file.status = 'success'
+    file.percentage = 100
+    file.response = { local: true, name: file.name, size: file.size, url: file.url }
+    sync()
+    emit('success', file.response, file, [...fileList.value])
+    return
+  }
+
+  file.status = 'uploading'
+  file.percentage = 0
+  sync()
+
+  const xhr = new XMLHttpRequest()
+  const form = new FormData()
+  form.append(props.name, file.raw, file.name)
+  Object.entries(props.data || {}).forEach(([k, v]) => form.append(k, v))
+
+  xhr.upload.onprogress = (ev) => {
+    if (!ev.lengthComputable) return
+    const percent = Math.round((ev.loaded / ev.total) * 100)
+    file.percentage = percent
+    sync()
+    emit('progress', percent, file, [...fileList.value])
+  }
+
+  xhr.onload = () => {
+    if (xhr.status >= 200 && xhr.status < 300) {
+      let response: unknown = xhr.responseText
+      try {
+        response = JSON.parse(xhr.responseText)
+      } catch {
+        /* keep text */
+      }
+      file.status = 'success'
+      file.percentage = 100
+      file.response = response
+      const remoteUrl = pickUrlFromResponse(response)
+      if (remoteUrl) file.url = remoteUrl
+      sync()
+      emit('success', response, file, [...fileList.value])
+    } else {
+      file.status = 'fail'
+      sync()
+      emit('error', new Error(`Upload failed: ${xhr.status}`), file, [...fileList.value])
+    }
+  }
+
+  xhr.onerror = () => {
+    file.status = 'fail'
+    sync()
+    emit('error', new Error('Network error'), file, [...fileList.value])
+  }
+
+  xhr.open('POST', props.action)
+  Object.entries(props.headers || {}).forEach(([k, v]) => xhr.setRequestHeader(k, v))
+  xhr.withCredentials = props.withCredentials
+  xhr.send(form)
+}
+
+defineExpose({
+  clearFiles: () => {
+    fileList.value.forEach((f) => {
+      if (f.url?.startsWith('blob:')) URL.revokeObjectURL(f.url)
+    })
+    fileList.value = []
+    sync()
+  },
+  submit: () => {
+    fileList.value.filter((f) => f.status === 'ready').forEach(uploadFile)
+  },
+})
+</script>
+
+<style lang="scss" scoped>
+.qiu-upload {
+  width: 100%;
+  max-width: 560px;
+  font-size: 13px;
+  color: var(--qiu-text-color-regular, #606266);
+
+  &.is-disabled {
+    opacity: 0.6;
+    pointer-events: none;
+  }
+}
+
+.qiu-upload__input {
+  display: none;
+}
+
+.qiu-upload__dragger {
+  box-sizing: border-box;
+  padding: 28px 16px;
+  text-align: center;
+  cursor: pointer;
+  background: var(--qiu-fill-color-blank, #fff);
+  border: 1px dashed var(--qiu-border-color, #dcdfe6);
+  border-radius: 8px;
+  transition: border-color 0.2s ease, background 0.2s ease;
+
+  &:hover,
+  .is-dragover & {
+    background: color-mix(in srgb, var(--qiu-color-primary, #0f766e) 6%, #fff);
+    border-color: var(--qiu-color-primary, #0f766e);
+  }
+
+  p {
+    margin: 6px 0 0;
+  }
+
+  em {
+    font-style: normal;
+    color: var(--qiu-color-primary, #0f766e);
+  }
+}
+
+.qiu-upload__drag-icon {
+  font-size: 36px;
+  color: var(--qiu-color-primary, #0f766e);
+}
+
+.qiu-upload__tip {
+  margin: 8px 0 0;
+  font-size: 12px;
+  color: var(--qiu-text-color-secondary, #909399);
+}
+
+.qiu-upload__list {
+  padding: 0;
+  margin: 12px 0 0;
+  list-style: none;
+}
+
+.qiu-upload__item {
+  padding: 8px 10px;
+  margin-bottom: 8px;
+  background: var(--qiu-fill-color-lighter, #fafafa);
+  border: 1px solid var(--qiu-border-color-lighter, #ebeef5);
+  border-radius: 6px;
+}
+
+.qiu-upload__item-main {
+  display: flex;
+  gap: 8px;
+  align-items: center;
+}
+
+.qiu-upload__thumb {
+  flex-shrink: 0;
+  object-fit: cover;
+  border-radius: 4px;
+  background: var(--qiu-fill-color, #f0f2f5);
+}
+
+.qiu-upload__name {
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.qiu-upload__size {
+  flex-shrink: 0;
+  font-size: 12px;
+  color: var(--qiu-text-color-secondary, #909399);
+}
+
+.qiu-upload__remove {
+  display: inline-flex;
+  padding: 0;
+  color: var(--qiu-text-color-secondary, #909399);
+  cursor: pointer;
+  background: transparent;
+  border: 0;
+
+  &:hover {
+    color: var(--qiu-color-danger, #f56c6c);
+  }
+}
+
+.qiu-upload__progress {
+  height: 4px;
+  margin-top: 8px;
+  overflow: hidden;
+  background: var(--qiu-fill-color, #e5e7eb);
+  border-radius: 999px;
+}
+
+.qiu-upload__progress-bar {
+  height: 100%;
+  background: var(--qiu-color-primary, #0f766e);
+  transition: width 0.15s ease;
+}
+
+.qiu-upload__fail {
+  margin-top: 4px;
+  font-size: 12px;
+  color: var(--qiu-color-danger, #f56c6c);
+}
+
+.qiu-upload__response {
+  margin: 8px 0 0;
+  padding: 8px;
+  max-height: 120px;
+  overflow: auto;
+  font-size: 12px;
+  line-height: 1.45;
+  color: var(--qiu-text-color-regular, #606266);
+  white-space: pre-wrap;
+  word-break: break-all;
+  background: var(--qiu-fill-color-light, #f5f7fa);
+  border-radius: 4px;
+}
+
+.qiu-upload__card-list {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 10px;
+}
+
+.qiu-upload__card,
+.qiu-upload__card-trigger {
+  position: relative;
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+  background: var(--qiu-fill-color-blank, #fff);
+  border: 1px dashed var(--qiu-border-color, #dcdfe6);
+  border-radius: 8px;
+}
+
+.qiu-upload__card-trigger {
+  color: var(--qiu-text-color-secondary, #909399);
+  cursor: pointer;
+  gap: 4px;
+
+  &:hover {
+    color: var(--qiu-color-primary, #0f766e);
+    border-color: var(--qiu-color-primary, #0f766e);
+  }
+}
+
+.qiu-upload__card-img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.qiu-upload__card-name {
+  padding: 6px;
+  overflow: hidden;
+  font-size: 12px;
+  text-align: center;
+  text-overflow: ellipsis;
+}
+
+.qiu-upload__card-progress {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: #fff;
+  background: rgba(0, 0, 0, 0.45);
+}
+
+.qiu-upload__card-remove {
+  position: absolute;
+  top: 2px;
+  right: 4px;
+  z-index: 1;
+  padding: 0 4px;
+  color: #fff;
+  cursor: pointer;
+  background: rgba(0, 0, 0, 0.45);
+  border: 0;
+  border-radius: 4px;
+}
+</style>