Vue3+SpringCloud实现图片上传和回显

简介: Vue3+SpringCloud实现图片上传和回显

 前台:

<el-form-item label="照片" prop="nineSmallPlacePhoto">
   <UploadImg v-model="formData.nineSmallPlacePhoto" draggable="false" height="80px" 
      width="100%" class="min-w-80px" />
</el-form-item>

image.gif

draggable属性是否启用拖拽上传,默认为false

后台:

//实体类
    /**
    * 照片地址
    */
    private String nineSmallPlacePhoto;
//SmallPlaceSaveReqVO:
    @Schema(description = "照片地址")
    private String nineSmallPlacePhoto;  
//SmallPlaceRespVO:
    @Schema(description = "图片地址")
    @ExcelProperty("图片地址")
    private String nineSmallPlacePhoto;

image.gif

Controller层:

@Tag(name = "管理后台 - 九小场所")
@RestController
@RequestMapping("/stores/small-place")
@Validated
public class SmallPlaceController {
    @Resource
    private SmallPlaceService smallPlaceService;
    @PostMapping("/create")
    @Operation(summary = "创建九小场所")
   @PreAuthorize("@ss.hasPermission('stores:small-place:create')")
    public CommonResult<Long> createSmallPlace(@Valid @RequestBody SmallPlaceSaveReqVO createReqVO) {
        return success(smallPlaceService.createSmallPlace(createReqVO));
    }
    @PutMapping("/update")
    @Operation(summary = "更新九小场所")
   @PreAuthorize("@ss.hasPermission('stores:small-place:update')")
    public CommonResult<Boolean> updateSmallPlace(@Valid @RequestBody SmallPlaceSaveReqVO updateReqVO) {
        smallPlaceService.updateSmallPlace(updateReqVO);
        return success(true);
    }
    @DeleteMapping("/delete")
    @Operation(summary = "删除九小场所")
    @Parameter(name = "id", description = "编号", required = true)
   @PreAuthorize("@ss.hasPermission('stores:small-place:delete')")
    public CommonResult<Boolean> deleteSmallPlace(@RequestParam("id") Long id) {
        smallPlaceService.deleteSmallPlace(id);
        return success(true);
    }
    @GetMapping("/get")
    @Operation(summary = "获得九小场所")
    @Parameter(name = "id", description = "编号", required = true, example = "1024")
   @PreAuthorize("@ss.hasPermission('stores:small-place:query')")
    public CommonResult<SmallPlaceRespVO> getSmallPlace(@RequestParam("id") Long id) {
        SmallPlaceDO smallPlace = smallPlaceService.getSmallPlace(id);
        return success(BeanUtils.toBean(smallPlace, SmallPlaceRespVO.class));
    }
    @GetMapping("/page")
    @Operation(summary = "获得九小场所分页")
   @PreAuthorize("@ss.hasPermission('stores:small-place:query')")
    public CommonResult<PageResult<SmallPlaceRespVO>> getSmallPlacePage(@Valid SmallPlacePageReqVO pageReqVO) {
        PageResult<SmallPlaceDO> page = smallPlaceService.getSmallPlacePage(pageReqVO);
        return success(BeanUtils.toBean(page, SmallPlaceRespVO.class));
    }
}

image.gif

Mapper:

@Mapper
public interface SmallPlaceMapper extends BaseMapperX<SmallPlaceDO> {
    default PageResult<SmallPlaceDO> selectPage(SmallPlacePageReqVO reqVO) {
        return selectPage(reqVO, new LambdaQueryWrapperX<SmallPlaceDO>()
                .likeIfPresent(SmallPlaceDO::getNineSmallPlaceName, reqVO.getNineSmallPlaceName())
                .orderByDesc(SmallPlaceDO::getId));
    }
    default SmallPlaceDO selectByUsername(String nineSmallPlaceName) {
        return selectOne(SmallPlaceDO::getNineSmallPlaceName, nineSmallPlaceName);
    }
}

image.gif

Service:

public interface SmallPlaceService {
    /**
     * 创建九小场所
     *
     * @param createReqVO 创建信息
     * @return 编号
     */
    Long createSmallPlace(@Valid SmallPlaceSaveReqVO createReqVO);
    /**
     * 更新九小场所
     *
     * @param updateReqVO 更新信息
     */
    void updateSmallPlace(@Valid SmallPlaceSaveReqVO updateReqVO);
    /**
     * 删除九小场所
     *
     * @param id 编号
     */
    void deleteSmallPlace(Long id);
    /**
     * 获得九小场所
     *
     * @param id 编号
     * @return 九小场所
     */
    SmallPlaceDO getSmallPlace(Long id);
    /**
     * 获得九小场所分页
     *
     * @param pageReqVO 分页查询
     * @return 九小场所分页
     */
    PageResult<SmallPlaceDO> getSmallPlacePage(SmallPlacePageReqVO pageReqVO);
}

image.gif

实现类:

@Service
@Validated
public class SmallPlaceServiceImpl implements SmallPlaceService {
    @Resource
    private SmallPlaceMapper smallPlaceMapper;
    @Override
    @Transactional(rollbackFor = Exception.class)
    @LogRecord(type = SMALL_PLACE_USER_TYPE, subType = SMALL_PLACE_CREATE_SUB_TYPE, bizNo = "{{#smallPlace.id}}",
            success = SMALL_PLACE_CREATE_SUCCESS)
    public Long createSmallPlace(SmallPlaceSaveReqVO createReqVO) {
        // 插入
        SmallPlaceDO smallPlace = BeanUtils.toBean(createReqVO, SmallPlaceDO.class);
        smallPlaceMapper.insert(smallPlace);
        //  记录操作日志上下文
        LogRecordContext.putVariable("smallPlace", smallPlace);
        // 返回
        return smallPlace.getId();
    }
    @Override
    public void updateSmallPlace(SmallPlaceSaveReqVO updateReqVO) {
        // 校验存在
        validateSmallPlaceExists(updateReqVO.getId());
        // 更新
        SmallPlaceDO updateObj = BeanUtils.toBean(updateReqVO, SmallPlaceDO.class);
        smallPlaceMapper.updateById(updateObj);
    }
    @Override
    public void deleteSmallPlace(Long id) {
        // 校验存在
        validateSmallPlaceExists(id);
        // 删除
        smallPlaceMapper.deleteById(id);
    }
}

image.gif

yaml文件加上上传路径,加载最后即可

image.gif 编辑

效果展示:

image.gif 编辑

目录
相关文章
|
6月前
|
存储 JSON 前端开发
SpringCloud+Vue3一个字段多个存储以及回显
SpringCloud+Vue3一个字段多个存储以及回显
85 2
|
开发框架 缓存 前端开发
SpringCloud微服务实战——搭建企业级开发框架(二十四):集成行为验证码和图片验证码实现登录功能
随着近几年技术的发展,人们对于系统安全性和用户体验的要求越来越高,大多数网站系统都逐渐采用行为验证码来代替图片验证码。GitEgg-Cloud集成了开源行为验证码组件和图片验证码,并在系统中添加可配置项来选择具体使用哪种验证码。 • AJ-Captcha:行为验证码 • EasyCaptcha: 图片验证码
655 28
SpringCloud微服务实战——搭建企业级开发框架(二十四):集成行为验证码和图片验证码实现登录功能
|
1月前
|
人工智能 安全 Java
AI 时代:从 Spring Cloud Alibaba 到 Spring AI Alibaba
本次分享由阿里云智能集团云原生微服务技术负责人李艳林主讲,主题为“AI时代:从Spring Cloud Alibaba到Spring AI Alibaba”。内容涵盖应用架构演进、AI agent框架发展趋势及Spring AI Alibaba的重磅发布。分享介绍了AI原生架构与传统架构的融合,强调了API优先、事件驱动和AI运维的重要性。同时,详细解析了Spring AI Alibaba的三层抽象设计,包括模型支持、工作流智能体编排及生产可用性构建能力,确保安全合规、高效部署与可观测性。最后,结合实际案例展示了如何利用私域数据优化AI应用,提升业务价值。
141 4
|
1月前
|
人工智能 自然语言处理 Java
Spring Cloud Alibaba AI 入门与实践
本文将介绍 Spring Cloud Alibaba AI 的基本概念、主要特性和功能,并演示如何完成一个在线聊天和在线画图的 AI 应用。
357 7
|
2月前
|
存储 SpringCloudAlibaba Java
【SpringCloud Alibaba系列】一文全面解析Zookeeper安装、常用命令、JavaAPI操作、Watch事件监听、分布式锁、集群搭建、核心理论
一文全面解析Zookeeper安装、常用命令、JavaAPI操作、Watch事件监听、分布式锁、集群搭建、核心理论。
【SpringCloud Alibaba系列】一文全面解析Zookeeper安装、常用命令、JavaAPI操作、Watch事件监听、分布式锁、集群搭建、核心理论
|
2月前
|
SpringCloudAlibaba 负载均衡 Dubbo
【SpringCloud Alibaba系列】Dubbo高级特性篇
本章我们介绍Dubbo的常用高级特性,包括序列化、地址缓存、超时与重试机制、多版本、负载均衡。集群容错、服务降级等。
【SpringCloud Alibaba系列】Dubbo高级特性篇
|
2月前
|
SpringCloudAlibaba JavaScript Dubbo
【SpringCloud Alibaba系列】Dubbo dubbo-admin安装教程篇
本文介绍了 Dubbo-Admin 的安装和使用步骤。Dubbo-Admin 是一个前后端分离的项目,前端基于 Vue,后端基于 Spring Boot。安装前需确保开发环境(Windows 10)已安装 JDK、Maven 和 Node.js,并在 Linux CentOS 7 上部署 Zookeeper 作为注册中心。
【SpringCloud Alibaba系列】Dubbo dubbo-admin安装教程篇
|
2月前
|
SpringCloudAlibaba Dubbo Java
【SpringCloud Alibaba系列】Dubbo基础入门篇
Dubbo是一款高性能、轻量级的开源Java RPC框架,提供面向接口代理的高性能RPC调用、智能负载均衡、服务自动注册和发现、运行期流量调度、可视化服务治理和运维等功能。
【SpringCloud Alibaba系列】Dubbo基础入门篇
|
2月前
|
Java Nacos Sentinel
Spring Cloud Alibaba:一站式微服务解决方案
Spring Cloud Alibaba(简称SCA) 是一个基于 Spring Cloud 构建的开源微服务框架,专为解决分布式系统中的服务治理、配置管理、服务发现、消息总线等问题而设计。
463 13
Spring Cloud Alibaba:一站式微服务解决方案
|
4月前
|
Dubbo Java 应用服务中间件
Dubbo学习圣经:从入门到精通 Dubbo3.0 + SpringCloud Alibaba 微服务基础框架
尼恩团队的15大技术圣经,旨在帮助开发者系统化、体系化地掌握核心技术,提升技术实力,从而在面试和工作中脱颖而出。本文介绍了如何使用Dubbo3.0与Spring Cloud Gateway进行整合,解决传统Dubbo架构缺乏HTTP入口的问题,实现高性能的微服务网关。