当前位置: 首页 > article >正文

vue3vue-elementPlus-admin框架中form组件的upload写法

dialog中write组件代码

let ImageList = reactive<UploadFile[]>([])

const formSchema = reactive<FormSchema[]>([
  {
    field: 'ImageFiles',
    label: '现场图片',
    component: 'Upload',
    colProps: { span: 24 },
    componentProps: {
      limit: 5,
      action: PATH_URL + `/upload`,
      headers: {
        [userStore.getTokenKey]: userStore.getToken
      },
      autoUpload: true,
      // fileList: ImageList,
      multiple: true,
      listType: 'picture-card',
      beforeUpload: (file: File) => {
        const isImage = /^image\//.test(file.type)
        const isLt10M = file.size / 1024 / 1024 < 10
        if (!isImage) {
          ElMessage.error('只能上传图片文件!')
          return false
        }
        if (!isLt10M) {
          ElMessage.error('图片大小不能超过 10MB!')
          return false
        }
        return true
      },
      onSuccess: (response: UploadResponse, uploadFile: UploadFile) => {
        if (response.code === 200) {
          // 更新文件信息
          Object.assign(uploadFile, {
            url: MINO_SERVER + response.data.path,
            path: response.data.path,
            id: response.data.id,
            name: response.data.fullname
          })
          ImageList.push(uploadFile)
          handleImageUpdate(ImageList)
        } else {
          uploadFile.status = 'error'
        }
      },
      onError: (_: Error, uploadFile: UploadFile) => {
        uploadFile.status = 'error'
      },
      onPreview: (uploadFile: UploadFile) => {
        if (uploadFile.url) {
          window.open(uploadFile.url)
        }
      },
      beforeRemove: async (uploadFile: UploadFile) => {
        const newList = ImageList.filter((item) => item.id !== uploadFile.id)
        ImageList = newList
        handleImageUpdate(ImageList)
      },
      onExceed: () => {
        ElMessage.warning('最多只能上传5张图片')
      },

      slots: {
        default: () => (
          <div>
            <ElIcon class="avatar-uploader-icon" size="26" style="color:#165DFF">
              +
            </ElIcon>
          </div>
        ),
        tip: () => (
          <div class="el-upload__tip" style="width:420px;color:#606266">
            支持jpg、png格式,单个文件不超过10M,最多上传5张
          </div>
        )
      }
    }
  },

])

const handleImageUpdate = (imageList) => {
  setValues({ ImageFiles: imageList })
  setSchema([
    {
      field: 'ImageFiles',
      path: 'componentProps.fileList',
      value: imageList
    }
  ])
}


//回显时处理数据

watch(
  () => props.currentRow,
  (currentRow) => {
    if (!currentRow) return
    // console.log(currentRow)
    setValues(currentRow)
    if (currentRow.ImageFiles && currentRow.ImageFiles.length) {
      currentRow.ImageFiles?.forEach((item) => {
        item.name = item.fullname
        item.url = MINO_SERVER + item.path
      })
      Object.assign(ImageList, currentRow.ImageFiles)
      handleImageUpdate(ImageList)
    } else {
      ImageList.splice(0, ImageList.length)
      handleImageUpdate(ImageList)
    }

  },
  {
    deep: true,
    immediate: true
  }
)


index页面记得处理提交的数据 


http://www.kler.cn/a/589840.html

相关文章:

  • 人工智能辅助 3D 建模:Claude + Blender MCP 体验
  • Java高频面试之集合-13
  • vllm-openai多服务器集群部署AI模型
  • 365天之第P10周:Pytorch实现车牌识别
  • [HelloCTF]PHPinclude-labs超详细WP-Level 0
  • 本地部署 RAGFlow - 修改默认端口
  • 【npm ERR! code ERESOLVE npm ERR! ERESOLVE unable to resolve dependency tree】
  • 论文阅读:2023-arxiv Can AI-Generated Text be Reliably Detected?
  • 重构版:JavaScript 的 new 操作符——从“黑箱仪式”到“亲手造物”的认知跃迁
  • 大语言模型入门文献推荐
  • 多模态模型Orpheus,基于病理图像的乳腺癌复发风险智能评估工具|顶刊解读·25-03-17
  • Oracle 查询表占用空间(表大小)的方法
  • 设计模式-组件协作
  • 问题链的拓扑学重构
  • java 动态赋值写入word模板
  • react实现虚拟列表
  • MYsql—1
  • 【Linux系统】进程地址空间详解
  • GLOW-TTS
  • Yolo v4 (Darknet) Mac M2 安装与运行