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

目录
相关文章
|
2月前
|
存储 JSON 前端开发
SpringCloud+Vue3一个字段多个存储以及回显
SpringCloud+Vue3一个字段多个存储以及回显
57 2
|
开发框架 缓存 前端开发
SpringCloud微服务实战——搭建企业级开发框架(二十四):集成行为验证码和图片验证码实现登录功能
随着近几年技术的发展,人们对于系统安全性和用户体验的要求越来越高,大多数网站系统都逐渐采用行为验证码来代替图片验证码。GitEgg-Cloud集成了开源行为验证码组件和图片验证码,并在系统中添加可配置项来选择具体使用哪种验证码。 • AJ-Captcha:行为验证码 • EasyCaptcha: 图片验证码
630 28
SpringCloud微服务实战——搭建企业级开发框架(二十四):集成行为验证码和图片验证码实现登录功能
|
19天前
|
SpringCloudAlibaba API 开发者
新版-SpringCloud+SpringCloud Alibaba
新版-SpringCloud+SpringCloud Alibaba
|
2月前
|
资源调度 Java 调度
Spring Cloud Alibaba 集成分布式定时任务调度功能
定时任务在企业应用中至关重要,常用于异步数据处理、自动化运维等场景。在单体应用中,利用Java的`java.util.Timer`或Spring的`@Scheduled`即可轻松实现。然而,进入微服务架构后,任务可能因多节点并发执行而重复。Spring Cloud Alibaba为此发布了Scheduling模块,提供轻量级、高可用的分布式定时任务解决方案,支持防重复执行、分片运行等功能,并可通过`spring-cloud-starter-alibaba-schedulerx`快速集成。用户可选择基于阿里云SchedulerX托管服务或采用本地开源方案(如ShedLock)
|
2月前
|
人工智能 前端开发 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 应用,帮助读者快速搭建智能聊天系统并探索更多高级功能。
762 2
【实操】Spring Cloud Alibaba AI,阿里AI这不得玩一下(含前后端源码)
|
16天前
|
人工智能 前端开发 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”即可获取源码。 🎯主要目标:
29 0
|
3月前
|
资源调度 Java 调度
Spring Cloud Alibaba 集成分布式定时任务调度功能
Spring Cloud Alibaba 发布了 Scheduling 任务调度模块 [#3732]提供了一套开源、轻量级、高可用的定时任务解决方案,帮助您快速开发微服务体系下的分布式定时任务。
14693 25
|
2月前
|
Java 微服务 Spring
SpringBoot+Vue+Spring Cloud Alibaba 实现大型电商系统【分布式微服务实现】
文章介绍了如何利用Spring Cloud Alibaba快速构建大型电商系统的分布式微服务,包括服务限流降级等主要功能的实现,并通过注解和配置简化了Spring Cloud应用的接入和搭建过程。
SpringBoot+Vue+Spring Cloud Alibaba 实现大型电商系统【分布式微服务实现】
|
4月前
|
人工智能 Java Spring
使用 Spring Cloud Alibaba AI 构建 RAG 应用
本文介绍了RAG(Retrieval Augmented Generation)技术,它结合了检索和生成模型以提供更准确的AI响应。示例中,数据集(包含啤酒信息)被加载到Redis矢量数据库,Spring Cloud Alibaba AI Starter用于构建一个Spring项目,演示如何在接收到用户查询时检索相关文档并生成回答。代码示例展示了数据加载到Redis以及RAG应用的工作流程,用户可以通过Web API接口进行交互。
52527 66
|
2月前
|
Dubbo Java 调度
揭秘!Spring Cloud Alibaba的超级力量——如何轻松驾驭分布式定时任务调度?
【8月更文挑战第20天】在现代微服务架构中,Spring Cloud Alibaba通过集成分布式定时任务调度功能解决了一致性和可靠性挑战。它利用TimerX实现任务的分布式编排与调度,并通过`@SchedulerLock`确保任务不被重复执行。示例代码展示了如何配置定时任务及其分布式锁,以实现每5秒仅由一个节点执行任务,适合构建高可用的微服务系统。
57 0

热门文章

最新文章