jeecg-boot:关于Jupload组件的上传后再进行新增会保留上次的上传结果的问题

jeecgboot 视频上传组件 JeecgBoot是一个基于 Spring Boot 和 MyBatis Plus 的快速开发平台,它提供了许多常用组件和功能,包括视频上传组件。JeecgBoot中的视频上传组件可以让用户方便地上传、管理和播放视频文件。需要注意的是,视频上传组件依赖 OSS 服务,所以需要先在阿里云上开通 OSS 服务,并获取相应的 AccessKey 和 SecretKey。总之,JeecgBoot中的视频上传组件提供了方便、快捷的视频上传和管理功能,可以帮助开发者快速构建视频上传和播放系统。 阅读详情

##### 版本号:
2.0.2

##### 问题描述:
这样的场景:
有个界面用到的上传组件jupload,有一个问题,就是如果在添加的时候上传了文件,或者点击编辑的时候有已经上传的文件,那么下次再点击增加新的记录的时候,上传文件列表会保留上次上次的文件列表;

##### 截图&代码:
问题截图:
第一次点击新增,弹出新增界面:
![image](https://user-images.githubusercontent.com/4738191/61576606-91788f80-ab0e-11e9-84da-9578099b4272.png)
没问题!
点击文件上传:
![image](https://user-images.githubusercontent.com/4738191/61576641-02b84280-ab0f-11e9-8b9d-8c03a78f934b.png)
保存,
然后再点击新增界面:
![image](https://user-images.githubusercontent.com/4738191/61576646-1368b880-ab0f-11e9-8ac8-7ab765f0b7cd.png)
还是上次上传后的界面

原因在于Jupload.vue控件在监听value编号的时候,对于value为空,处理有问题
`   `

   initFileList(paths){
        if(!paths || paths.length==0){
          return ;
        }
        let fileList = [];
        let arr = paths.split(",")
        for(var a=0;a<arr.length;a++){
          fileList.push({
            uid:uidGenerator(),
            name:getFileName(arr[a]),
            status: 'done',
            url: this.urlDownload+arr[a],
            response:{
              status:"history",
              message:arr[a]
            }
          })
        }
        this.fileList = fileList
      },


应该在判断长度为0的时候增加以下代码:
`    `

  initFileList(paths){
        if(!paths || paths.length==0){
          **this.fileList = [];**
          return ;
        }
        let fileList = [];
        let arr = paths.split(",")
        for(var a=0;a<arr.length;a++){
          fileList.push({
            uid:uidGenerator(),
            name:getFileName(arr[a]),
            status: 'done',
            url: this.urlDownload+arr[a],
            response:{
              status:"history",
              message:arr[a]
            }
          })
        }
        this.fileList = fileList
      },

 

jeecg-boot上传文件预览 jeecg修改组件,支持在线预览 阅读详情

相关推荐

JEECG Boot的JUpload组件,除了拖拽上传,这些隐藏功能你用过吗?(文件预览、移动排序、批量删除)

本文深入解析JEECG Boot框架中JUpload组件的隐藏功能,包括文件预览、移动排序和批量删除等高级特性。通过实战案例和配置示例,展示如何利用这些功能提升企业级文件管理效率,特别适合电商、知识库等需要高效文件处理的场景。

weixin_30832143的博客 397

文件上传、导入

上传前用户要选择本地要上传的文件,用户可以通过以下三种方式操作触发: 通过input type="file" 选择本地文件 通过拖拽的方式把文件拖过来 在编辑框里面复制粘贴 一、三种选择文件的不同操作 1. 通过input type="file" 选择本地文件 通过这种方式选择文件的话,前端可以有2种上传方式:Ajax请求 和 Form表单。 Ajax请求: 就是平时用的 post...

huangpb的博客 1003

JEECG Boot项目里,如何给JUpload组件加上拖拽上传?一个Vue 3 + Ant Design Vue的实战改造

本文详细介绍了在JEECG Boot项目中为JUpload组件添加拖拽上传功能的实战改造方案。基于Vue 3和Ant Design Vue技术栈,通过扩展组件属性、统一事件处理和样式优化,实现了保留原有功能的同时支持拖拽上传的混合解决方案,显著提升了企业级后台管理系统的文件上传体验。

weixin_33737134的博客 265

ANT-DESIGN-VUE-JEECG JUPLOAD上传视频回显

开发的时候选用了ant-design-vue-jeecg 这么一个组合,客户提出想要在编辑页面预览视频,简单记录一下实现方法。

weixin_58248573的博客 925

别再手动点上传了!JEECG Boot项目里用JUpload组件实现拖拽上传,5分钟搞定

本文详细介绍了在JEECG Boot项目中如何使用JUpload组件快速实现拖拽上传功能。通过简单的配置和代码示例,开发者可以轻松提升文件上传的操作效率,支持批量处理和移动端适配,适用于CMS、OA系统等多种场景。

weixin_27379781的博客 237

JEECG-Boot项目实战:如何用JUpload组件打造一个带预览和排序的图片管理模块?

本文详细介绍了如何利用JEECG-Boot框架的JUpload组件构建企业级图片管理模块,包括拖拽上传、图片排序和实时预览等高级功能。通过实战案例和代码示例,帮助开发者快速实现高效、安全的图片管理系统,提升电商后台和内容管理系统的用户体验。

weixin_28040125的博客 357

【JEECG 组件扩展】JUpload上传组件扩展拖拽区域上传

摘要:本文介绍了基于JeecgBoot框架的JUpload上传组件扩展功能。该组件支持拖拽上传、图片上传等多种模式,提供文件预览、移动排序、下载等操作。主要特性包括:1)支持拖拽区域上传;2)可配置文件类型限制;3)支持最大上传数量控制;4)提供上传前后的事件处理;5)支持返回URL或完整文件信息。组件采用Vue3开发,包含完整的样式和交互逻辑,适用于JeecgBoot项目的文件上传需求。

00后Java全栈 | 深耕智能制造 | DevOps实践者 1376

Jeecg-Boot + VUE2前后端数据交互实战:从数据库到表格的完整链路

在Web应用开发中,前后端数据交互是核心环节,其本质是将数据库中的结构化数据高效、安全地呈现给用户界面。其原理通常基于RESTful API架构,通过HTTP协议进行请求与响应,并利用ORM框架(如Mybatis-Plus)简化数据库操作。这一过程的技术价值在于实现数据驱动视图,提升开发效率与系统可维护性。在低代码平台和后台管理系统等应用场景中,规范的数据交互能有效管理复杂业务逻辑。本文以Jeecg-Boot和VUE2技术栈为例,深入解析了包括**分页查询**、**条件组装**在内的完整数据流转链路,并分享

387

Jeecg-Boot 上传图片,列表展示图片

这里说一下使用前端组件JImageUpload 图片上传,上传后 ,经过 后端的,upload 方法返回的路径是 “temp/XXXXX.png” ,然后返回的时候就是,展示不出来。在src\components\jeecg\OnLine\JPopupOnlReport.vue 中找到 getImgeView 这个方法 复制到。在application-dev.yml 中找到 jeecg.path.upload 这个属性(这里以本地做演示)在data文件中的 表单数据中。然后再 在 list中导入这个。

白开水 1268

jeecgBoot-vue3图片上传

【代码】jeecgBoot-vue3图片上传。

y199710的博客 1101

JUploader-开源

JUploader 是一种无需访问其网站即可将文件上传到图像/文件托管服务器的程序。 目前支持的服务器:ImageShack、VPX、eFotek、BankFotek、Tapetosik、YourFileLink、ZippyShare、SpeedyShare、Plikojad。

JeecgBoot项目中JUploadButton组件禁用属性失效问题解析

在JeecgBoot低代码平台开发过程中,很多开发者反馈JUploadButton组件的`disabled`属性在某些情况下会失效,导致上传按钮无法正确禁用。这个问题不仅影响用户体验,还可能造成数据不一致等严重问题。 ## 问题现象 当设置`JUploadButton`的`disabled`属性为`true`时,按钮外观可能显示为禁用状态,但用户仍然可以点击并触发上传操作: ```vue ...

gitblog_01415的博客 832

Linux下科大讯飞离线语音识别SDK从下载到实战(附常见问题解决)

本文详细介绍了在Linux系统下,如何从科大讯飞开放平台获取离线语音识别SDK,完成环境准备、编译部署到实战开发的完整流程。文章重点解析了SDK目录结构、语法词典定制、示例代码修改,并针对开发中常见的“词典加载失败”、音频格式、交叉编译及性能优化等问题提供了深度解决方案,助力嵌入式与IoT开发者快速实现稳定可靠的离线命令识别功能。

honey的博客 1241

JeecgBoot知识库文档库上传ZIP文件类型校验问题解析

JeecgBoot知识库文档库上传ZIP文件类型校验问题解析 【免费下载链接】JeecgBoot ????企业级低代码平台集成了AI应用平台,帮助企业快速实现低代码开发和构建AI应用!前后端分离架构 SpringBoot,SpringCloud、Mybatis,Ant Design4、 Vue3.0、TS+vite!强大的代码...

gitblog_01406的博客 446

2026 最新实战教程:AI 重构开发全流程(从需求→上线→运维)

1)做什么系统2)技术栈3)功能模块4)部署要求plaintext我要做一个:待办事项(Todo)全栈应用技术栈:前端:React + TypeScript + Tailwind后端:Node.js + Express + MongoDB部署:Docker + 本地运行(后续可上云)功能:- 增删改查任务- 任务状态切换(完成/未完成)- 简单错误处理请按企业级标准生成:架构设计 + 全部代码 + 接口文档 + 启动命令。

qq_35779316的博客 1713

【人工智能】AI算法系统设计与算法建模的详细阐述

AI算法系统设计与算法建模是人工智能领域中的核心任务之一,它涉及从问题定义、数据收集、算法选择、模型构建到系统部署的全过程。以下是对AI算法系统设计与算法建模的详细阐述

weixin_51306394的博客 4356

JeecgBoot文件上传限制异常处理机制解析

JeecgBoot文件上传限制异常处理机制解析 【免费下载链接】JeecgBoot ????企业级低代码平台集成了AI应用平台,帮助企业快速实现低代码开发和构建AI应用!前后端分离架构 SpringBoot,SpringCloud、Mybatis,Ant Design4、 Vue3.0、TS+vite!强大的代码生成器让前后端...

gitblog_01409的博客 510

如何在高版本的ubuntu系统里安装gcc4.1.2

1、下载安装包,一共五个http://archive.ubuntu.com/ubuntu/pool/universe/g/gcc-4.1/,根据计算机系统位数   进行下载,64位下载amd64结尾的。开头分别是cpp-4.1_4.1.2、g++-4.1_4.1.2、gcc-4.1-base_4.1.2、gcc-     4.1_4.1.2、libstdc++6-4.1 2、使用sudo d

lsr_fighting的博客 1933

jeecgboot前端vue2,jupload.vue上传文件浏览显示在底层问题

jeecgboot前端vue2上传空间浏览问题,vue2里面的控件里面添加了固定的宽度和层级:所以导致图片浏览的时候跑到最下面去了。

java开发者专栏 385

经典蓝牙中的Sniff、Hold与Park模式

若主设备在Sniff Attempt窗口外发送数据,从设备无法接收,需依赖重传机制。移动时立即传输数据。:Sniff Interval=20ms,Attempt=1时隙。:传感器每2秒唤醒一次同步信标,主设备按需唤醒特定传感器采集数据。Slave进入Sniff模式:每20ms唤醒1个时隙监听数据。:设备需要短暂执行高优先级任务(如扫描其他蓝牙设备)。:无数据传输超时后,设备可能自动进入Sniff模式。:主设备通过信标唤醒从设备,或从设备主动请求退出(:平衡功耗与响应速度,适合间歇性数据传输设备。

shishuangquan111的博客 1676

Android 集成 Google 与 Facebook 第三方登录实战详解(2024版)

本文详细介绍了2024年Android应用集成Google与Facebook第三方登录的完整实战指南。通过分步教程和代码示例,帮助开发者快速实现一键登录功能,提升用户体验和注册转化率,同时涵盖隐私合规和常见错误处理的最佳实践。

blue的专栏 822

JeecgBoot文件上传方式

(1)、小程序端/H5/app,自己将服务器地址和后台返回的图片地址拼接((2)、后台拼接返回完整的地址,小程序端/H5/app直接展示。(2.2)、后台对应类中引入如下,方法中进行拼接返回。(2.1)、配置文件path中加入url配置。下一篇专门写怎么开通阿里云oss服务。一个在学习的开发者,勿喷,欢迎交流。(1)、列表对应字段加入插槽。(3)、script中引入。(4)、methods方法。

m0_55841258的博客 6790

使用 MATLAB/Simulink 对风光互补发电系统进行建模

随着全球对清洁能源的需求日益增长,风力发电和光伏发电作为两种主要的可再生能源形式,在电力供应中的占比越来越高。然而,由于风电和光伏的间歇性和不确定性,单独依赖其中任何一种能源都会给电网带来挑战。因此,风光互补发电系统(Wind-PV Hybrid System)应运而生,通过合理配置风力发电机和光伏电池板的数量,可以有效提高系统的稳定性和可靠性。此外,为了确保整个电力系统的安全稳定运行,还需要研究风光互补发电系统与主网之间的协调调度策略。本教程将详细介绍如何使用。

amy_mhd的博客 119

JeecgBoot/Ant Design of Vue前端开发之文件上传下载修改已上传文件列表展示页

JeecgBoot文件上传下载自定义展示功能

m0_58360569的博客 5306

基于STM32的汽车主门电动窗开关系统设计方案

以下是基于 STM32CubeMX 和 HAL 库的示例代码,可实现基本的功能。

weixin_42300449的博客 996

数学建模模型总结

这是本人在两年内准备参加数学建模竞赛搜集到的模型资料,已经经过了本人的筛选和整理,希望能够对准备参加数学建模竞赛的学弟学妹们提供一些帮助!

上一篇: jeecg-boot:表单校验数据库是否已经存储该值
下一篇: jeecg-boot:单表代码生成以后如何快速的将默认的弹框模式改为抽屉模式
gwcgwcjava
博客等级 码龄17年 70粉丝 106原创
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付:10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值