优化上传图片显示

2026-03-12 14:33:50 +08:00 · 2026-03-12 14:33:50 +08:00 · 83a0efac5a
parent 86c3a61d00
commit 83a0efac5a
7 changed files with 28 additions and 170 deletions
--- a/.env.production
+++ b/.env.production
@ -14,7 +14,7 @@ VITE_API_PAY_PREFIX = '/pay'
 VITE_API_PAY_TARGET = 'https://sxwz.xueai.art'  # http://43.248.133.202

 # 任务处理模块
-VITE_API_WORKFLOW_UPLOAD = 'https://talkingdraw.xueai.art/aigc/workflow/file/upload'  # https://sxwz.xueai.art/workflow  https://designtools.xueai.art/workflow 
+VITE_API_WORKFLOW_UPLOAD = 'https://designtools.xueai.art/workflow/file/upload'  # https://sxwz.xueai.art/workflow  https://designtools.xueai.art/workflow 
 VITE_API_WORKFLOW_WS = 'wss://talkingdraw.xueai.art/testworkflow'

 # 是否开启KKFileView
--- a/components.d.ts
+++ b/components.d.ts
@ -31,7 +31,6 @@ declare module 'vue' {
    RouterLink: typeof import('vue-router')['RouterLink']
    RouterView: typeof import('vue-router')['RouterView']
    Select: typeof import('./src/components/Select/index.vue')['default']
-    UploadPicture: typeof import('./src/components/UploadPicture.vue')['default']
    VirtualScroller: typeof import('./src/components/virtual-scroller/VirtualScroller.vue')['default']
    VirtualScrollerItem: typeof import('./src/components/virtual-scroller/VirtualScrollerItem.vue')['default']
  }
--- a/src/components/UploadPicture.vue
+++ b/src/components/UploadPicture.vue
@ -1,136 +0,0 @@
-<template>
-  <el-upload
-    ref="uploadRef"
-    class="uploader"
-    :action="uploadurl"
-    multiple
-    :limit="props.uploadNumber"
-    list-type="picture-card"
-    :before-upload="beforeUpload"
-    :on-success="SuccessSet"
-    :on-remove="Remove"
-    :on-exceed="handleExceed"
-    :on-error="Errors"
-    :class="{ exceed: imageNum === 6 }"
-  >
-    <div class="uploader-icon"><i-ep-plus /></div>
-  </el-upload>
-</template>
-
-<script setup>
-import { genFileId } from 'element-plus'
-import { useDisplayStore } from '@/stores'
-
-const props = defineProps({
-  type: {
-    type: String,
-    default: ''
-  },
-  uploadNumber: {
-    type: Number,
-    default: 1
-  }
-})
-
-const uploadurl = import.meta.env.VITE_API_WORKFLOW_UPLOAD
-const imageNum = ref(0)
-const images = ref([])
-const useParams = useParamStore()
-const uploadRef = ref(null)
-
-const handleSelect = async (url) => {
-  // 从URL获取图片Blob对象
-  const initialFile = await fetch(url)
-  const blob = await initialFile.blob()
-  if (props.type === 'clothes') useParams.rootTaskImage = url
-
-  // 创建文件对象
-  const file = new File([blob], `selected_image_${Date.now()}.jpg`, { type: blob.type })
-  file.uid = genFileId()
-  console.log('file', file)
-
-  if (props.uploadNumber === 1 && imageNum.value === 1) uploadRef.value.clearFiles() // 如果上传数量为1且已存在图片，则清除已存在的图片
-
-  if (imageNum.value >= 6) {
-    // eslint-disable-next-line no-undef
-    ElMessage.warning('图片数量已达到上限，请删除图片后重新上传')
-    return
-  }
-
-  // 获取当前文件列表
-  uploadRef.value.handleStart(file)
-  uploadRef.value.submit()
-}
-
-// 检查文件类型和大小
-const beforeUpload = (rawFile) => {
-  console.log('beforeUpload', rawFile)
-  const allowedTypes = ['image/jpeg', 'image/png']
-
-  // 检查文件类型
-  if (!allowedTypes.includes(rawFile.type)) {
-    // eslint-disable-next-line no-undef
-    ElMessage.error('不支持的文件类型，请上传 JPG、PNG 格式的图片')
-    return false
-  }
-
-  // 检查文件大小（限制为2MB）
-  if (rawFile.size / 1024 / 1024 > 10) {
-    // eslint-disable-next-line no-undef
-    ElMessage.error('图片大小不能超过 10MB')
-    return false
-  }
-}
-
-// 成功上传后，将文件信息保存到 state 中
-const SuccessSet = (response, uploadFile) => {
-  console.log('上传成功', response)
-  images.value.push({ id: uploadFile.uid, url: response.url })
-  useParams.setParams(response.url, props.type, true)
-  imageNum.value += 1
-}
-
-// 超出限制时触发
-const handleExceed = (files) => {
-  console.log('超出限制', files[0])
-  if (props.uploadNumber === 1) {
-    uploadRef.value.clearFiles()
-    const file = files[0]
-    file.uid = genFileId()
-    uploadRef.value.handleStart(file)
-    uploadRef.value.submit()
-    imageNum.value = 0
-    return
-  }
-  // eslint-disable-next-line no-undef
-  ElMessage.error('姿势与背景最多只能上传六张图片')
-}
-
-// 错误处理
-const Errors = (error) => {
-  imageNum.value -= 1
-  console.log('上传失败', images.value)
-  console.log('上传失败', error)
-  // eslint-disable-next-line no-undef
-  ElMessage.error('上传失败请重新添加图片，并点击生成')
-}
-
-// 删除图片
-const Remove = (UploadFile) => {
-  console.log('Remove', UploadFile)
-  images.value = images.value.filter((item) => item !== UploadFile.uid)
-  imageNum.value -= 1
-}
-
-watch(() => useParams.AIimageUrl[props.type], (newValue) => {
-  if (newValue) {
-    handleSelect(newValue)
-    // 清空 store 中的值，避免重复触发
-    useParams.AIimageUrl[props.type] = ''
-  }
-})
-</script>
-
-<style scoped>
-@import "@/styles/home/uploadImg.css";
-</style>
--- a/src/components/dialogBox/imageUploader/index.vue
+++ b/src/components/dialogBox/imageUploader/index.vue
@ -2,7 +2,7 @@
  <div class="image-uploader">
    <div class="image-list">
      <div
-        v-for="(item, index) in imageList"
+        v-for="(item, index) in localPreviewList"
        :key="item.uid"
        class="image-item"
        @click.stop
@ -13,7 +13,7 @@
          <i-ep-close />
        </div>
      </div>
-      <div v-if="imageList.length < limit" class="upload-trigger" @click="triggerUpload">
+      <div v-if="localPreviewList.length < limit" class="upload-trigger" @click="triggerUpload">
        <i-ep-plus />
        <span>参考内容</span>
      </div>
@ -51,9 +51,13 @@ const emit = defineEmits(['update:modelValue'])
 const uploadurl = import.meta.env.VITE_API_WORKFLOW_UPLOAD
 const uploadRef = ref(null)
 const imageList = ref([...props.modelValue])
+const localPreviewList = ref([...props.modelValue])

 watch(() => props.modelValue, (newVal) => {
  imageList.value = [...newVal]
+  if (newVal.length === 0) {
+    localPreviewList.value = []
+  }
 }, { deep: true })

 const triggerUpload = () => {
@ -76,12 +80,21 @@ const beforeUpload = (rawFile) => {

 const handleSuccess = (response, uploadFile) => {
  ElMessage.success('上传成功')
+  
+  const localUrl = URL.createObjectURL(uploadFile.raw)
+  
  const newImage = {
    uid: uploadFile.uid,
    url: response.url
  }
  imageList.value.push(newImage)
  emit('update:modelValue', [...imageList.value])
+  
+  const newPreview = {
+    uid: uploadFile.uid,
+    url: localUrl
+  }
+  localPreviewList.value.push(newPreview)
 }

 const handleError = () => {
@ -93,6 +106,12 @@ const handleExceed = () => {
 }

 const handleDelete = (index) => {
+  const previewItem = localPreviewList.value[index]
+  if (previewItem && previewItem.url.startsWith('blob:')) {
+    URL.revokeObjectURL(previewItem.url)
+  }
+  
+  localPreviewList.value.splice(index, 1)
  imageList.value.splice(index, 1)
  emit('update:modelValue', [...imageList.value])
 }
@ -133,8 +152,6 @@ defineExpose({
  position: relative;
  width: 56px;
  height: 56px;
-  border-radius: 8px;
-  overflow: hidden;
  cursor: pointer;
  transition: all 0.3s ease;

@ -152,6 +169,7 @@ defineExpose({
    height: 100%;
    object-fit: cover;
    transition: all 0.3s ease;
+    border-radius: 8px;
  }

  .image-index {
--- a/src/components/dialogBox/index.vue
+++ b/src/components/dialogBox/index.vue
@ -6,7 +6,7 @@
      <div class="sender-top">
        <div v-if="useDisplay.Sender_variant === 'default'" class="scroll-to-bottom-text" @click.stop="handleScrollToBottom">回到底部<img src="@/assets/dialog/ArrowDown.svg"></div>

-        <div class="upload-img-container">
+        <div v-show="type !== 'text'" class="upload-img-container">
          <div class="reference-diagram">
            <ImageUploader ref="referenceDiagramRef" v-model="referenceImages" :limit="4" />
          </div>
--- a/src/config/runninghub/index.js
+++ b/src/config/runninghub/index.js
@ -6,7 +6,7 @@ export async function Playload(data,type) {
    
    const nodeInfoList = []
    
-    if (Array.isArray(data.imgs) && data.imgs.length > 0) {
+    if (Array.isArray(data.imgs) && data.imgs.length > 0 && type === 'image') {
      for (const key of data.imgs) {
        if (json.nodeInfoList[key.name]) {
          console.log(key)
@ -64,27 +64,4 @@ function getWidthHeight(data) {
  console.log(data.width, data.height)

  return data
-}
-
-function flux(data) {
-
-  const nodeInfoList = [
-    { nodeId: '23', fieldName: 'text', fieldValue: data.prompt },
-    { nodeId: '129', fieldName: 'aspect_ratio', fieldValue: data.aspect_ratio },
-    { nodeId: '101', fieldName: 'control_after_generate', fieldValue: 'randomize' },
-    { nodeId: '15', fieldName: 'index', fieldValue: 0 },
-
-    {nodeId: '2', fieldName: 'vae_name', fieldValue: 'ae.sft'},
-    {nodeId: '5', fieldName: 'sampler_name', fieldValue: 'euler'},
-    {nodeId: '50', fieldName: 'value', fieldValue: 1},
-    {nodeId: '102', fieldName: 'value', fieldValue: 20},
-    {nodeId: '103', fieldName: 'value', fieldValue: 1},
-    {nodeId: '104', fieldName: 'value', fieldValue: 1},
-    {nodeId: '105', fieldName: 'value', fieldValue: 0.8}
-  ]
-
-  return {
-    workflowId: '2011689651156819970',
-    nodeInfoList
-  }
-}
+}
--- a/src/utils/createTask.js
+++ b/src/utils/createTask.js
@ -19,8 +19,8 @@ export async function createTask(data, type, taskId, token) {

 // 获取结果
 export async function getTask(result) {
-  if (result.code === 0 && result.msg === 'success') {
+  if (result.code === 0 && result.msg === 'success' && Array.isArray(result.data) && result.data.length > 0) {
    return { type: true, url: result.data[0].fileUrl }
  }
-  return { type: false, message: result.data.exception_message }
+  return { type: false, message: result.data?.exception_message || '生成失败' }
 }