智能圖像處理平臺：圖片管理

接著我們講圖片管理，先實現圖片基礎的增刪改查，再去考慮圖像處理。

主要是，我們需要完成查詢時，查詢的圖片的上傳者的角色等級小于等于我們當前登陸賬號。

后端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 {@Overridepublic 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 mapperPUBLIC "-//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_nameFROM image iLEFT JOIN user u ON i.user_id = u.idLEFT JOIN role r ON u.role_id = r.idWHERE i.deleted=0AND u.deleted=0AND r.deleted=0AND 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 = paramsthis.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>

效果展示：