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

devtools/2025/3/18 17:41:00/

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 < 10if (!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 = newListhandleImageUpdate(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.fullnameitem.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.ppmy.cn/devtools/168115.html

相关文章

游戏引擎学习第161天

回顾并计划今天的工作 我们从头开始编写一款完整的游戏&#xff0c;完全不依赖游戏引擎和库。我们会从最基本的渲染代码开始&#xff0c;一直到高层的AI代码&#xff0c;涵盖其中的一切。 目前&#xff0c;我们正在做一些比较轻松有趣的事情&#xff0c;可以说是比较随意的内…

php开发转go的学习计划及课程资料信息

以下是为该课程体系整理的配套教材和教程资源清单,包含书籍、视频、官方文档和实战项目资源,帮助你系统化学习: Go语言学习教材推荐(PHP开发者适配版) 一、核心教材(按学习阶段分类) 1. 基础语法阶段(阶段一) 资源类型名称推荐理由链接/获取方式官方教程Go语言之旅交…

AI日报 - 2025年3月18日

AI日报 - 2025年3月18日 &#x1f31f; 今日概览&#xff08;60秒速览&#xff09; ▎&#x1f916; AGI突破 | SOO微调技术减少语言模型欺骗行为10倍 创新对齐技术为更安全AI铺路 ▎&#x1f4bc; 商业动向 | Figure推出全球最高产量人形机器人生产线BotQ 年产1.2万台&#x…

简单以太网配置

display arp //查看路由器mac地址 交换机配置命令&#xff1a; system-view // 从用户视图进入系统视图 dis mac-address //查看mac地址表 路由器配置命令: system-view // 从用户视图进入系统视图 int GigabitEthernet 0/0/0 //进入G口 0/0/0 进入之后配置网关: ip addre…

十分钟学会Git

Git 和SVN 的区别&#xff1a; 架构模式&#xff1a; Git 是分布式版本控制系统&#xff0c;每个开发者的本地仓库都包含完整的历史记录&#xff0c;可以离线操作&#xff1b;而 SVN 是集中式版本控制系统&#xff0c;所有版本数据集中存放在中央服务器上&#xff0c;操作大多依…

MyBatis SqlSession 是如何创建的? 它与 SqlSessionFactory 有什么关系?

SqlSession 是 MyBatis 中与数据库交互的核心接口&#xff0c;它提供了执行 SQL 语句、管理事务、获取 Mapper 接口代理对象等关键功能。 SqlSession 实例 不是直接通过 new 关键字创建的&#xff0c;而是通过 SqlSessionFactory 工厂来创建的。 SqlSessionFactory 负责创建 Sq…

从零开始写C++3D游戏引擎(开发环境VS2022+OpenGL)之十一 从打光到材质 细嚼慢咽逐条读代码系列

写在篇前的话 作为一个曾经在代码堆里面苦苦挣扎的萌新,困惑的事情在于库,各种依赖,包换文件,链接库,纠结于代码的作用意义。尤其在3D引擎开发的问题上,很多人都被各种困难给阻拦,放弃了在3D渲染,3D游戏引擎上大涨鸿图的机会。 当然关于3D游戏引擎的教程已经汗牛充栋…

机器学习中说的正向传递和反向传递是什么意思

在机器学习&#xff0c;尤其是深度学习领域&#xff0c;​正向传递&#xff08;Forward Pass&#xff09;​和反向传递&#xff08;Backward Pass&#xff09;​是神经网络训练过程中的两个核心步骤。它们共同构成了训练神经网络的基础框架&#xff0c;通常与梯度下降算法结合使…