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

news2025/3/19 0:48:18

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.coloradmin.cn/o/2317493.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

嵌入式Linux | 什么是 BootLoader、Linux 内核(kernel)、和文件系统?

01 什么是 BootLoader 呢&#xff1f; 它是个引导程序&#xff0c;也就是硬件复位以后第一个要执行的程序&#xff0c;它主要工作就是初始化操作系统运行的环境&#xff0c;比如说内存、定时器、缓冲器等&#xff0c;当这个工作做完以后&#xff0c;再把操作系统的代码加载…

函数(函数的概念、库函数、自定义函数、形参和实参、return语句、数组做函数参数、嵌套调用和链式访问、函数的声明和定义、static和extern)

一、函数的概念 •C语⾔中的函数&#xff1a;⼀个完成某项特定的任务的⼀⼩段代码 •函数又被翻译为子函数&#xff08;更准确&#xff09; •在C语⾔中我们⼀般会⻅到两类函数&#xff1a;库函数 ⾃定义函数 二、库函数 1 .标准库和头文件 •C语⾔的国际标准ANSIC规定了⼀…

ImGui 学习笔记(五) —— 字体文件加载问题

ImGui 加载字体文件的函数似乎存在编码问题&#xff0c;这一点可能跟源文件的编码也有关系&#xff0c;我目前源文件编码是 UTF-16。 当参数中包含中文字符时&#xff0c;ImGui 内部将字符转换为宽字符字符集时候&#xff0c;采用的 MultiByteToWideChar API 参数不太对&#…

OpenCV计算摄影学(20)非真实感渲染之增强图像的细节函数detailEnhance()

操作系统&#xff1a;ubuntu22.04 OpenCV版本&#xff1a;OpenCV4.9 IDE:Visual Studio Code 编程语言&#xff1a;C11 算法描述 此滤波器增强特定图像的细节。 cv::detailEnhance用于增强图像的细节&#xff0c;通过结合空间域和频率域的处理&#xff0c;提升图像中特定细节…

Android PC 要来了?Android 16 Beta3 出现 Enable desktop experience features 选项

在之前的 《Android 桌面窗口新功能推进》 我们就聊过&#xff0c;Google 就一直在努力改进 Android 的内置桌面模式&#xff0c;例如添加了适当的窗口标题、捕捉窗口的能力、悬停选项、窗口大小调整、最小化支持、app-to-web 等。 比如在搭载 Android 15 QPR 1 Beta 2 的 Pix…

Git常用操作之GitLab

Git常用操作之GitLab 小薛博客官网&#xff1a;小薛博客Git常用操作之GitLab官方地址 1、GitLab安装 https://gitlab.cn/install/ 1、Docker安装GitLab https://docs.gitlab.cn/jh/install/docker.html 1、设置卷位置 在设置其他所有内容之前&#xff0c;请配置一个新的…

Netty基础—NIO的使用简介

1.Buffer缓冲区 (1)Buffer缓冲区的作用 在NIO中&#xff0c;所有的数据都是通过使用Buffer缓冲区来处理的。如果要通过NIO&#xff0c;将数据写到文件和网络或从文件和网络中读取数据&#xff0c;那么就需要使用Buffer缓冲区来进行处理。 (2)Buffer缓冲区的4个核心概念 Buffer缓…

Matlab 汽车ABS实现模糊pid和pid控制

1、内容简介 Matlab 181-汽车ABS实现模糊pid和pid控制 可以交流、咨询、答疑 2、内容说明 略 实现汽车防抱死制动系统&#xff08;ABS&#xff09;的控制算法&#xff0c;通常涉及到传统的PID控制和模糊PID控制两种方法。下面将分别介绍这两种控制策略的基本概念以及如何在M…

Muon: An optimizer for hidden layers in neural networks

引言 在深度学习领域&#xff0c;优化算法对模型训练效率和性能起着关键作用。从经典的随机梯度下降 (SGD) 及其动量法&#xff0c;到自适应优化方法 Adam/AdamW 等&#xff0c;一系列优化器大大加速了神经网络的收敛。然而&#xff0c;随着模型规模和数据量的爆炸式增长&…

【VSCODE 插件 可视化】:SVG 编辑插件 SVG Editor

插件下载 svgeditor 创建文件 Windows/Linux 快捷键 Ctrl Shift P 打开VSCODE 命令面板查找 New File With Svg Editor 编辑文件 保存文件 打开文件以继续编辑 CG 选中多个&#xff1a;shift单击没找到横向分布功能无法用键盘微调位置

Cursor插件市场打不开解决

问题现象&#xff1a; cursor搜索插件的时候提示错误&#xff0c;无法搜索安装插件 error while fetching extensions.failed to fetch 问题原因 cursor默认安装使用的并不是vs code的插件市场&#xff0c;国内网络有时候打不开 解决 修改插件市场地址并重启cursor 打开cur…

嵌入式开发之STM32学习笔记day06

基于STM32F103C8T6的开发实践——从入门到精通01 1. 引言 STM32系列微控制器是STMicroelectronics推出的一款高性能、低功耗的32位微控制器&#xff0c;广泛应用于嵌入式系统中。STM32F103C8T6是其中非常受欢迎的一款&#xff0c;凭借其强大的性能、丰富的外设接口和低廉的价格…

AI驱动的视频字幕提取与翻译工具

青梧字幕是一款基于Whisper技术的AI字幕提取工具&#xff0c;专为视频制作者、翻译人员和自媒体创作者设计。它通过先进的语音识别算法&#xff0c;能够自动从视频文件中提取字幕内容&#xff0c;并支持多种语言和字幕格式&#xff0c;极大地简化了字幕制作流程。 目前暂支持 …

【MySQL】MySQL审计工具Audit Plugin安装使用

MySQL审计工具Audit Plugin安装使用 https://www.cnblogs.com/waynechou/p/mysql_audit.html MySQL 5.6 开启审计功能 https://blog.51cto.com/u_15127556/4344503 MySQL之添加日志审计功能 https://blog.csdn.net/weixin_43279032/article/details/105507170 MySQL开启日志记录…

游戏引擎学习第163天

我们可以在资源处理器中使用库 因为我们的资源处理器并不是游戏的一部分&#xff0c;所以它可以使用库。我说过我不介意让它使用库&#xff0c;而我提到这个的原因是&#xff0c;今天我们确实有一个选择——可以使用库。 生成字体位图的两种方式&#xff1a;求助于 Windows 或…

用python代码将excel中的数据批量写入Json中的某个字段,生成新的Json文件

需求 需求&#xff1a; 1.将execl文件中的A列赋值给json中的TrackId&#xff0c;B列赋值给json中的OId 要求 execl的每一行&#xff0c;对应json中的每一个OId json 如下&#xff1a; {"List": [{"BatchNumber": "181-{{var}}",// "Bat…

《我的Python觉醒之路》之转型Python(十五)——控制流

[今天是2025年3月17日&#xff0c;继续复习第一章节、第二章节的内容 ] 《我的Python觉醒之路》之转型Python&#xff08;十四&#xff09;——控制流

PosterRender 实现微信下程序 分享商品生成海报

PosterRender 是什么 PosterRender 是一种专注于生成高质量海报图像的技术或工具&#xff0c;常用于生成静态图片&#xff0c;特别是适合用于营销、宣传和展示的图形设计。它通常用于在服务端或客户端渲染复杂的图像&#xff0c;包括文字、图形、图标、背景等&#xff0c;生成…

如何利用 Zeabur 实现 OceanBase 的一键部署

引言 Zeabur 是一个功能强大且即开即用的自动化部署平台&#xff0c;它不仅能迅速部署多种应用&#xff0c;还支持一键安装 MySQL、PostgreSQL 等数据库服务。 Zeabur 拥有众多国内外用户&#xff0c;如 AFFiNE、Bytebase 等企业客户&#xff0c;以及大量全栈和独立开发者。将…

(hash表+vector 数位和相等数对的最大和)leetcode 2342

一定要断点调试看看数据对不对的上&#xff01;&#xff01;&#xff01;不然很容易弄不清楚值和下标 这个题意思是在nums中找出相同数位和的值 如 数位和为7 nums中符合要求的有 43&#xff0c;7 在这些数中选两个相加取最大值&#xff0c;再与其他数位和取得的相加最大值比…