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 编辑

目录
相关文章
|
3月前
|
存储 JSON 前端开发
SpringCloud+Vue3一个字段多个存储以及回显
SpringCloud+Vue3一个字段多个存储以及回显
63 2
|
开发框架 缓存 前端开发
SpringCloud微服务实战——搭建企业级开发框架(二十四):集成行为验证码和图片验证码实现登录功能
随着近几年技术的发展,人们对于系统安全性和用户体验的要求越来越高,大多数网站系统都逐渐采用行为验证码来代替图片验证码。GitEgg-Cloud集成了开源行为验证码组件和图片验证码,并在系统中添加可配置项来选择具体使用哪种验证码。 • AJ-Captcha:行为验证码 • EasyCaptcha: 图片验证码
638 28
SpringCloud微服务实战——搭建企业级开发框架(二十四):集成行为验证码和图片验证码实现登录功能
|
2月前
|
SpringCloudAlibaba API 开发者
新版-SpringCloud+SpringCloud Alibaba
新版-SpringCloud+SpringCloud Alibaba
|
3月前
|
资源调度 Java 调度
Spring Cloud Alibaba 集成分布式定时任务调度功能
定时任务在企业应用中至关重要,常用于异步数据处理、自动化运维等场景。在单体应用中,利用Java的`java.util.Timer`或Spring的`@Scheduled`即可轻松实现。然而,进入微服务架构后,任务可能因多节点并发执行而重复。Spring Cloud Alibaba为此发布了Scheduling模块,提供轻量级、高可用的分布式定时任务解决方案,支持防重复执行、分片运行等功能,并可通过`spring-cloud-starter-alibaba-schedulerx`快速集成。用户可选择基于阿里云SchedulerX托管服务或采用本地开源方案(如ShedLock)
126 1
|
1月前
|
JSON SpringCloudAlibaba Java
Springcloud Alibaba + jdk17+nacos 项目实践
本文基于 `Springcloud Alibaba + JDK17 + Nacos2.x` 介绍了一个微服务项目的搭建过程,包括项目依赖、配置文件、开发实践中的新特性(如文本块、NPE增强、模式匹配)以及常见的问题和解决方案。通过本文,读者可以了解如何高效地搭建和开发微服务项目,并解决一些常见的开发难题。项目代码已上传至 Gitee,欢迎交流学习。
129 1
Springcloud Alibaba + jdk17+nacos 项目实践
|
26天前
|
消息中间件 自然语言处理 Java
知识科普:Spring Cloud Alibaba基本介绍
知识科普:Spring Cloud Alibaba基本介绍
57 2
|
1月前
|
Dubbo Java 应用服务中间件
Dubbo学习圣经:从入门到精通 Dubbo3.0 + SpringCloud Alibaba 微服务基础框架
尼恩团队的15大技术圣经,旨在帮助开发者系统化、体系化地掌握核心技术,提升技术实力,从而在面试和工作中脱颖而出。本文介绍了如何使用Dubbo3.0与Spring Cloud Gateway进行整合,解决传统Dubbo架构缺乏HTTP入口的问题,实现高性能的微服务网关。
|
2月前
|
人工智能 前端开发 Java
Spring Cloud Alibaba AI,阿里AI这不得玩一下
🏀闪亮主角: 大家好,我是JavaDog程序狗。今天分享Spring Cloud Alibaba AI,基于Spring AI并提供阿里云通义大模型的Java AI应用。本狗用SpringBoot+uniapp+uview2对接Spring Cloud Alibaba AI,带你打造聊天小AI。 📘故事背景: 🎁获取源码: 关注公众号“JavaDog程序狗”,发送“alibaba-ai”即可获取源码。 🎯主要目标:
93 0
|
3月前
|
人工智能 前端开发 Java
【实操】Spring Cloud Alibaba AI,阿里AI这不得玩一下(含前后端源码)
本文介绍了如何使用 **Spring Cloud Alibaba AI** 构建基于 Spring Boot 和 uni-app 的聊天机器人应用。主要内容包括:Spring Cloud Alibaba AI 的概念与功能,使用前的准备工作(如 JDK 17+、Spring Boot 3.0+ 及通义 API-KEY),详细实操步骤(涵盖前后端开发工具、组件选择、功能分析及关键代码示例)。最终展示了如何成功实现具备基本聊天功能的 AI 应用,帮助读者快速搭建智能聊天系统并探索更多高级功能。
1353 2
【实操】Spring Cloud Alibaba AI,阿里AI这不得玩一下(含前后端源码)
|
4月前
|
资源调度 Java 调度
Spring Cloud Alibaba 集成分布式定时任务调度功能
Spring Cloud Alibaba 发布了 Scheduling 任务调度模块 [#3732]提供了一套开源、轻量级、高可用的定时任务解决方案,帮助您快速开发微服务体系下的分布式定时任务。
14948 29