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

2024-08-01 78

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： 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>

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

后台：

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

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));
    }
}

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);
    }
}

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);
}

实现类：

@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);
    }
}