智能图像处理平台：图片管理

接着我们讲图片管理，先实现图片基础的增删改查，再去考虑图像处理。

主要是，我们需要完成查询时，查询的图片的上传者的角色等级小于等于我们当前登陆账号。

后端controller：

package com.llpp.controller; import cn.hutool.json.JSONUtil; import com.baomidou.mybatisplus.extension.plugins.pagination.Page; import com.llpp.entity.Image; import com.llpp.entity.User; import com.llpp.service.impl.ImageServiceImpl; import com.llpp.service.impl.RedisService; import com.llpp.tool.PrimaryKey; import com.llpp.tool.Result; import com.llpp.vo.ImageVO; import lombok.RequiredArgsConstructor; import org.springframework.util.StringUtils; import org.springframework.web.bind.annotation.*; import javax.servlet.http.HttpServletRequest; import java.time.LocalDateTime; import java.util.Objects; import java.util.Optional; /** * @Author 21326 * @Date 2025 2025/2/25 22:23 */ @RestController @RequiredArgsConstructor @RequestMapping("/api/image") public class ImageController { private final RedisService redisService; private final ImageServiceImpl imageService; @GetMapping("/getPage") public Result getPage(Page<ImageVO> page, ImageVO image, HttpServletRequest request) { String token = request.getHeader("authorization"); token = token.substring(token.indexOf(" ") + 1); String user = redisService.getValueOrDefault(token, "").toString(); image.setRoleId(JSONUtil.toBean(user, User.class).getRoleId()); return Result.data(imageService.getPage(page, image)); } @PostMapping("/rowSave") public Result rowSave(@RequestBody Image image, HttpServletRequest request) { return Optional.ofNullable(image) .filter(i -> !StringUtils.isEmpty(i.getUrl())) .filter(i -> !StringUtils.isEmpty(i.getName())) .map(i -> { String token = request.getHeader("authorization"); token = token.substring(token.indexOf(" ") + 1); String user = redisService.getValueOrDefault(token, "").toString(); User info = JSONUtil.toBean(user, User.class); i.setStatus(0); i.setUserId(info.getId()); i.setId(new PrimaryKey().nextId()); i.setCreateTime(LocalDateTime.now()); return Result.status(imageService.save(i)); }) .orElse(Result.fail("参数异常")); } @PostMapping("/rowEdit") public Result rowEdit(@RequestBody Image image) { return Optional.ofNullable(image) .filter(i -> Objects.nonNull(i.getId())) .map(i -> Result.status(imageService.updateById(i))) .orElse(Result.fail("参数异常")); } @PostMapping("/rowDel") public Result rowDel(@RequestBody Image image) { return Optional.ofNullable(image) .filter(i -> Objects.nonNull(i.getId())) .map(i -> Result.status(imageService.removeById(i.getId()))) .orElse(Result.fail("参数异常")); } }

service:

@Service public class ImageServiceImpl extends ServiceImpl<ImageMapper, Image> implements IImageService { @Override public IPage<ImageVO> getPage(IPage<ImageVO> page, ImageVO image) { return baseMapper.getPage(page, image); } }

mapper:

package com.llpp.mapper; import com.baomidou.mybatisplus.core.mapper.BaseMapper; import com.baomidou.mybatisplus.core.metadata.IPage; import com.llpp.entity.Image; import com.llpp.vo.ImageVO; import org.apache.ibatis.annotations.Mapper; import org.apache.ibatis.annotations.Param; /** * @Author 21326 * @Date 2025 2025/1/31 20:44 */ @Mapper public interface ImageMapper extends BaseMapper<Image> { IPage<ImageVO> getPage(IPage<ImageVO> page, @Param("image") ImageVO imageVO); } <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd"> <mapper namespace="com.llpp.mapper.ImageMapper"> <select id="getPage" resultType="com.llpp.vo.ImageVO"> SELECT i.id,i.deleted,i.status,i.remark,i.name,i.url,i.result,i.create_time,u.username,r.name AS role_name FROM image i LEFT JOIN user u ON i.user_id = u.id LEFT JOIN role r ON u.role_id = r.id WHERE i.deleted=0 AND u.deleted=0 AND r.deleted=0 AND u.role_id &gt;= #{image.roleId} AND r.id &gt;= #{image.roleId} <if test="image.id != null"> AND i.id = #{image.id} </if> <if test="image.status != null"> AND i.status = #{image.status} </if> <if test="image.startTime != null"> AND i.create_time &gt;= #{image.startTime} </if> <if test="image.endTime != null"> AND i.create_time &lt;= #{image.endTime} </if> <if test="image.name != null and image.name !=''"> AND i.name LIKE CONCAT('%',#{image.name},'%') </if> <if test="image.remark != null and image.remark !=''"> AND i.remark LIKE CONCAT('%',#{image.remark},'%') </if> <if test="image.username != null and image.username !=''"> AND u.username LIKE CONCAT('%',#{image.username},'%') </if> <if test="image.roleName != null and image.roleName !=''"> AND r.name LIKE CONCAT('%',#{image.roleName},'%') </if> </select> </mapper>

image.js：

import request from '@/router/axios'; import {baseUrl} from '@/config/env'; export const getPage = (current, size, params) => { return request({ url: baseUrl + '/image/getPage', method: 'get', params: { current, size, ...params } }) } export const rowSave = (form) => { return request({ url: baseUrl + '/image/rowSave', method: 'post', data: form }) } export const rowEdit = (row) => { return request({ url: baseUrl + '/image/rowEdit', method: 'post', data: row }) } export const rowDel = (row) => { return request({ url: baseUrl + '/image/rowDel', method: 'post', data: row }) }

image.vue:

<template> <basic-container> <avue-crud :option="option" :search="search" :page="page" v-model="form" :table-loading="loading" :data="tableData" ref="crud" @row-update="rowUpdate" @row-save="rowSave" @row-del="rowDel" @search-change="searchChange" @search-reset="searchReset" @current-change="currentChange" @size-change="sizeChange" @refresh-change="refreshChange" @on-load="onLoad"> </avue-crud> </basic-container> </template> <script> import {getPage, rowDel, rowEdit, rowSave} from "@/api/image/image"; export default { name: "image", data() { return { option: { height: 'auto', stripe: true, tip: false, searchShow: true, searchMenuSpan: 6, border: true, index: false, viewBtn: true, addBtn: true, delBtn: true, editBtn: true, column: [ { label: '图片编号', prop: 'id', search: true, width: 120, span: 24, addDisplay: false, editDisplay: false, viewDisplay: true, }, { label: '图片名称', prop: 'name', search: true, span: 24, rules: [{required: true, message: '请输入图片名称', trigger: 'blur'}] }, { label: '上传用户', prop: 'username', search: true, span: 24, addDisplay: false, editDisplay: false, viewDisplay: true, }, { label: '上传时间', prop: 'createTime', type: 'datetime', format: 'yyyy-MM-dd HH:mm:ss', valueFormat: 'yyyy-MM-dd HH:mm:ss', search: true, searchRange: true, span: 24, addDisplay: false, editDisplay: false, viewDisplay: true, startPlaceholder: '时间日期开始范围自定义', endPlaceholder: '时间日期结束范围自定义', }, { label: '用户角色', prop: 'roleName', search: true, width: 70, span: 24, addDisplay: false, editDisplay: false, viewDisplay: true, }, { label: '状态', prop: 'status', type: 'select', search: true, width: 70, span: 24, addDisplay: false, editDisplay: false, viewDisplay: true, props: { label: 'label', value: 'value' }, dicData: [ {label: '已处理', value: 1}, {label: '未处理', value: 0} ], }, { label: '备注', prop: 'remark', search: true, span: 24, }, { label: '图片详情', prop: 'url', type: 'upload', width: 100, span: 24, listType: 'picture-img', fileSize: 3584, dataType: 'string', action: '/api/file/upload', propsHttp: { res: 'data', url: 'url', }, }, { label: '处理结果', prop: 'result', type: 'upload', width: 100, span: 24, addDisplay: false, editDisplay: false, viewDisplay: true, listType: 'picture-img', fileSize: 3584, dataType: 'string', action: '/api/file/upload', propsHttp: { res: 'data', url: 'url', }, }, ] }, form: {}, search: {}, page: { total: 0, currentPage: 1, pageSize: 10, pageSizes: [5, 10, 15, 20, 50, 100, 150, 200] }, query: {}, loading: false, tableData: [] } }, created() { this.onLoad(); }, methods: { onLoad(page, params = {}) { this.loading = true; if (this.query.createTime != undefined && this.query.createTime != null && this.query.createTime.length > 0) { this.query.startTime = this.query.createTime[0]; this.query.endTime = this.query.createTime[1] this.query.createTime = null; } getPage(this.page.currentPage, this.page.pageSize, Object.assign(params, this.query)).then(res => { const data = res.data.data; this.page.total = data.total; this.tableData = data.records; this.loading = false; }) }, rowSave(form, done, loading) { rowSave(form).then(res => { if (res.data.code == 200) { this.$message.success(res.data.msg); done(); } else { this.$message.error(res.data.msg); loading(); } }).then(() => { this.onLoad(); }).catch(err => { loading(); }) }, rowUpdate(row, index, done, loading) { rowEdit(row).then(res => { if (res.data.code == 200) { this.$message.success(res.data.msg); done(); } else { this.$message.error(res.data.msg); loading(); } }).then(() => { this.onLoad(); }).catch(err => { loading(); }) }, rowDel(row, done, loading) { rowDel(row).then(res => { if (res.data.code == 200) { this.$message.success(res.data.msg); done(); } else { this.$message.error(res.data.msg); loading(); } }).then(() => { this.onLoad(); }).catch(err => { loading(); }) }, searchReset() { this.query = {} this.onLoad(this.page) }, searchChange(params, done) { this.query = params this.onLoad(this.page, params) done() }, currentChange(currentPage) { this.page.currentPage = currentPage }, sizeChange(pageSize) { this.page.pageSize = pageSize }, refreshChange(refresh) { if (refresh) { this.onLoad(this.page, this.query) } }, } } </script> <style scoped> </style>

效果展示：