前后端分离 -- 深入浅出系列 Spring Boot + Vue + ElementUI 实现相册管理系统【文件上传 分页 】 文件上传也不过如此~

引言

Hello，我是Bug终结者，一名热爱后端Java的风趣且幽默的程序员~ 终于等到幸运的你~

快来发现我的宇宙哦~

博文系列

深入浅出前后端分离系列第一篇：前后端分离 --- 深入浅出Spring Boot + Vue实现员工管理系统 Vue如此简单~

项目简介

开发一个基于==Spring Boot + Vue==的前后端分离相册管理系统项目，完成增、删、改、列表、多条件、分页的功能

功能细节：

• 实现照片的新增、删除、修改、列表、多条件、分页
• 图片上传使用 el-upload 控件，建议设置 auto-upload 为 false。
• 控制图片最大不能超过5M
• 上传的必须是图片，或者约束后缀为 png/jpg/gif/bmp等图片。
• 建议先保存标题信息到数据库，并返回得到noid的值，然后再上传图片，并更新 relative_path字段。
• 图片保存文件命名为 yyyyMMdd/HHmmssXXXX.后缀这样的图片，例如图片为 仓鼠.png，保存后类似为 20220107/1115232832.png， XXXX表示4位的随机数字。
• 图片在列表上显示为 200X200大小
• 列表要支持分页，分页控件使用 el-pagination
• 删除的时候，要将图片从硬盘上删除掉，然后再删除数据库中的记录。
• 列表页显示如下

效果图

开发环境

后端：Spring Boot + MyBatis + Maven

前端：Vue + ElementUI

工具：前端使用WebStorm，后端使用IDEA

项目风格

请求方式统一为Post请求，目的是保证安全性

规范了接口层统一返回格式为ResultBean，详细如：

统一返回格式风格类，ResultBean

状态码，详细信息，数据

数据表

t_picture

CREATE TABLE `t_picture` (
  `noid` int(11) NOT NULL AUTO_INCREMENT,
  `picture_name` varchar(64) NOT NULL COMMENT '照片名称',
  `relative_path` varchar(128) DEFAULT NULL COMMENT '存储相对路径',
  `create_time` datetime NOT NULL DEFAULT CURRENT_TIMESTAMP COMMENT '创建时间',
  PRIMARY KEY (`noid`)
) ENGINE=InnoDB AUTO_INCREMENT=71 DEFAULT CHARSET=utf8mb4

项目结构

前端结构

后端结构

项目难点

前端部分难点：

上传文件采用elementui控件的el-upload，要求不可自动上传，所以设置自动上传为false

其中，要先保存数据到数据库在进行保存图片路径存入数据库，通过存入的数据id去修改当前的数据

显示图片时采用了provide / inject组合控制的显示

因为上传成功后需要再次刷新，如果不刷新，图片不出来，那就要重新刷新页面，但刷新页面对用户来说极不友好，而且时间慢，效率低，所以采用该显示方式，完美解决了二次加载的问题

介绍provide / inject组合控制的显示到底怎么用

首先在app.vue中加入如下代码

app.vue

<template>
  <div id="app">
    <router-view v-if="isRouteAlive"/>
  </div>
</template>

<script>

  export default {
    name: 'App',
    computed: {},
    watch: {},
    //加入provide
    provide() {
      return{
        //返回reload方法，该方法为全局方法
        reload: this.reload,
      }
    },
    data() {
      return {
        isRouteAlive:true
      };
    },
    methods: {
      //刷新页面
      reload() {
        this.isRouteAlive = false;
        this.$nextTick(function () {
          this.isRouteAlive = true;
        })
      }
    }
  };
</script>

<style>
  @import '//at.alicdn.com/t/font_2048717_67mh6lqgbh.css';
</style>

在要二次加载的vue文件中加入provide

执行完上传图片代码后，进行二次加载

完美解决二次加载

核心源码

前端源码

PictureList.vue

<template xmlns:c="http://www.w3.org/1999/html">
  <div class="box-main2 box-heigt100">
    <div class="box-search">
      <div>
        <el-input type="text" size="mini" @keydown.native.enter="clkBtnSearch" @clear="clkBtnSearch" v-model="searchInfo.searchKey" clearable placeholder="请输入标题"></el-input>
      </div>
      <div class="m1">
        <el-button type="primary" size="mini"  @click="clkBtnSearch">搜索</el-button>
      </div>
      <div class="m1">
        <el-button type="warning" size="mini" @click="clkBtnAdd">新增</el-button>
      </div>
    </div>
    <div class="box-table2">
      <el-table :data="picturePage.list" border style="width: 100%;">
        <el-table-column type="index" label="序号" width="120"></el-table-column>
        <el-table-column width="150" label="照片">
          <template slot-scope="scope">
            <el-image :src="src_url+scope.row.relative_path"></el-image>
          </template>
        </el-table-column>
        <el-table-column prop="picture_name" label="标题"></el-table-column>
        <el-table-column prop="strCreateTime" label="上传日期"></el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button type="warning" @click="clkBtnEdit(scope.row)">修改</el-button>
            <el-button type="danger" @click="clkBtnDelete(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="box-page1">
      <el-pagination background :current-page="picturePage.pageNum" :page-size="picturePage.pageSize" :total="picturePage.total"
                     layout="total,prev,pager,next"
                     @current-change="chgPageNum">
      </el-pagination>
    </div>
    <el-dialog :visible.sync="showPictureDigLog" title="新增/编辑">
      <el-form label-width="120px">
        <el-form-item label="标题">
          <el-input type="text" size="mini" placeholder="请输入标题" v-model="picture.picture_name"></el-input>
        </el-form-item>
        <el-form-item label="照片">
          <el-image v-if="editPicture" style="width: 200px" :src="src_url+picture.relative_path"></el-image>
          <el-upload
            class="upload-demo"
            ref="upload"
            :action="uploadUrl"
            :data="uploadDataParam"
            :before-upload="checkFileType"
            accept=".png,.jpg,.gif, .bmp"
            :auto-upload="false">
            <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
            <div slot="tip" class="el-upload__tip">只能上传png/jpg/gif/bmp文件，且不超过5M</div>
          </el-upload>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" size="mini" @click="clkBtnSave">确定</el-button>
        <el-button type="warning" size="mini" @click="showPictureDigLog = false">取消</el-button>
      </span>
    </el-dialog>


  </div>
</template>

<script>
  import request from '@/common/utils/request';

  export default {
    computed:{
    },
    inject: ['reload'],
    data() {
      return {
        searchInfo: {searchKey:''},
        picturePage:{pageNum: 1, pageSize: 2, list: []},
        showPictureDigLog:false,
        picture:{},
        uploadUrl:'',
        uploadDataParam:{},
        src_url:'http://127.0.0.1:8345/springbootajax/',
        editPicture:false,
      };
    },
    watch:{
      '$route.path':{
        handler:function(newVal){
          if(newVal == '/picture-list'){
            this.initData();
          }
        }, immediate: true
      },
    },
    mounted() {
      this.uploadUrl = this.settings.apiUrl + "/picture/upload";
      this.initData();
    },
    methods: {
      initData() {
        this.getPictureList();
      },
      getPictureList() {
        let url = this.settings.apiUrl + "/picture/page";
        let data = {};
        data.searchKey = this.searchInfo.searchKey;
        data.pageNum = this.picturePage.pageNum;
        data.pageSize = this.picturePage.pageSize;
        console.log(data)
        request.post(url, data).then((res) => {
          if (res.code === 0) {
            this.picturePage = res.data;
          }
        })
      },
      clkBtnAdd(){
        this.picture = {};
        this.showPictureDigLog = true;
      },
      clkBtnEdit(row) {
        this.picture = JSON.parse(JSON.stringify(row));
        this.editPicture = true;
        this.showPictureDigLog = true;
      },
      checkFileType(file) {
        let imgSize = file.size / 1024 / 1024;
        console.log("文件类型:"+file.type);
        console.log("文件大小：" + imgSize)
        if (imgSize > 5) {
          this.$message("文件超出规定上传大小，请重新上传文件！")
          return false;
        }
        //png/jpg/gif/bmp
      },
      clkBtnSave() {
        let url = this.settings.apiUrl + "/picture/save";
        let data = this.picture;

        request.post(url, data).then((res) => {
          if (res.code === 0) {
            this.uploadDataParam.noid = res.data;
            this.submitUpload();
            this.showPictureDigLog = false;
            this.getPictureList();
            this.$message("保存成功~")
          }
        })
      },

      //保存表单提交
      submitUpload() {
        this.$refs.upload.submit();
        this.reload();
      },
      clkBtnDelete(row) {
        this.$confirm("您确信要删除吗？", "提示").then(() => {
          let url = this.settings.apiUrl + "/picture/delete";
          let data = {noid: row.noid};
          request.post(url, data).then((res) => {
            if (res.code === 0) {
              this.getPictureList();
              this.$message("删除成功~");
            }
          })
        }).catch(() => {
          this.$message("取消删除~");
        })
      },
      chgPageNum(pageNum) {
        this.picturePage.pageNum = pageNum;
        this.getPictureList();
      },
      clkBtnSearch() {
        this.getPictureList();
      }
    },
  };
</script>

<style lang="scss" scoped="scoped">

  .box-main2 {
    width: 90%;
    margin: 10px;
    box-table2{
      height: auto;
    }
    .box-search{
      display: flex;
      margin: 10px;
      .m1{
        padding-left: 10px;
      }
    }
    .box-page1{
      margin-top: 10px;
    }
  }

</style>

添加路由

route.js

{
    path: '/picture-list',
        meta: {pageTitle: '相册管理', leftMenuIndex: 'picture-list'},
            component: () => import('@/views/PictureList')
},

添加左侧菜单显示

LeftMenu.vue

<el-menu-item  index="picture-list" @click.native="clkItem('/picture-list')">
    <i class="menuitem-icon iconfont icon-logging"></i>
    <span class="menuitem-text" slot="title">相册列表</span>
</el-menu-item>

后端源码

PictureController

package com.wanshi.controller;

import com.github.pagehelper.PageInfo;
import com.wanshi.bean.Picture;
import com.wanshi.bean.ResultBean;
import com.wanshi.service.PictureService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.*;
import org.springframework.web.multipart.MultipartFile;

import java.util.List;
import java.util.Map;

@RestController
@CrossOrigin
@RequestMapping("/picture")
public class PictureController {

    @Autowired
    private PictureService pictureService;

    /**
     * 相册分页
     * @param param
     * @return
     */
    @PostMapping("/page")
    public ResultBean<PageInfo<Picture>> page(@RequestBody Picture param) {
        ResultBean<PageInfo<Picture>> res = pictureService.page(param);
        return res;
    }

    /**
     * 保存，将新增和修改合成了一个方法，根据id判断是新增或修改
     * @param param
     * @return
     */
    @PostMapping("/save")
    public ResultBean<Integer> insert(@RequestBody Picture param) {
        ResultBean<Integer> res = pictureService.save(param);
        return res;
    }

    /**
     * 删除图片
     * @param param
     * @return
     */
    @PostMapping("/delete")
    public ResultBean<Integer> delete(@RequestBody Picture param) {
        ResultBean<Integer> res = pictureService.delete(param);
        return res;
    }

    /**
     * 上传图片，与上传信息分开，改为手动上传，点击确定后，先保存数据，再保存图片相关信息至数据库
     * @param map
     * @param file
     * @return
     */
    @PostMapping("/upload")
    public ResultBean<Integer> upload(@RequestParam Map<String, Object> map, MultipartFile file) {
        ResultBean<Integer> res = pictureService.upload(map, file);
        return res;
    }

}

PictureService

package com.wanshi.service;

import com.github.pagehelper.PageHelper;
import com.github.pagehelper.PageInfo;
import com.wanshi.bean.Picture;
import com.wanshi.bean.ResultBean;
import com.wanshi.config.GlobalSet;
import com.wanshi.mapper.PictureMapper;
import com.wanshi.utils.PbFileUtils;
import org.apache.commons.lang3.StringUtils;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
import org.springframework.web.multipart.MultipartFile;

import java.io.File;
import java.text.SimpleDateFormat;
import java.util.List;
import java.util.Map;

@Service
public class PictureService {

    @Autowired
    private GlobalSet globalSet;

    @Autowired
    private PictureMapper pictureMapper;

    private SimpleDateFormat sdf = new SimpleDateFormat("yyyy年MM月dd日");

    public ResultBean<PageInfo<Picture>> page(Picture param) {
        PageHelper.clearPage();
        PageHelper.startPage(param.getPageNum(), param.getPageSize());
        List<Picture> pictureList = pictureMapper.list(param);
        for (Picture picture : pictureList) {
            if (picture != null) {
                picture.setStrCreateTime(sdf.format(picture.getCreate_time()));
            }
        }
        PageInfo<Picture> pageInfo = new PageInfo<>(pictureList);
        return ResultBean.create(0, "success", pageInfo);
    }

    public ResultBean<Integer> save(Picture param) {
        if (param.getNoid() != null ) {
            pictureMapper.update(param);
        } else {
            pictureMapper.insert(param);
        }
        return ResultBean.create(0, "success", param.getNoid());
    }

    public ResultBean<Integer> delete(Picture param) {
        //获取要删除的照片存储相对地址
        Picture picture = pictureMapper.get(param);
        //拼接绝对路径并删除
        new File(globalSet.getUploadPath() + picture.getRelative_path()).delete();
        pictureMapper.delete(param);
        return ResultBean.create(0, "success", null);
    }

    public ResultBean<Integer> upload(Map<String, Object> map, MultipartFile file) {
        try {
            //查询当前id是否存在，并上传过图片
            Picture picture2 = new Picture();
            picture2.setNoid(Integer.valueOf((String)map.get("noid")));
            Picture picture3 = pictureMapper.get(picture2);
            if (picture3.getRelative_path() != null) {
                //拼接绝对路径并删除
                new File(globalSet.getUploadPath() + picture3.getRelative_path()).delete();
            }
            //上传文件，获得上传后的文件名称
            String uploadName = PbFileUtils.upload(file, globalSet.getUploadPath());

            if (!StringUtils.isEmpty((String)map.get("noid"))) {
                Picture picture = new Picture();
                picture.setNoid((Integer.valueOf((String) map.get("noid"))));
                picture.setRelative_path(uploadName);
                pictureMapper.updateImg(picture);
            }
        } catch (Exception e) {
            e.printStackTrace();
        }
        return ResultBean.create(0, "success", null);
    }
}

工具类PbFileUtils

package com.wanshi.utils;

import com.wanshi.config.GlobalSet;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Component;
import org.springframework.web.multipart.MultipartFile;

import java.io.File;
import java.io.IOException;
import java.text.SimpleDateFormat;
import java.util.Date;
import java.util.Random;

/**
 * 图片上传类
 */
public class PbFileUtils {

    /**
     * 文件上传，
     * @param file 上传文件
     * @param uploadPath 要上传到的路径
     * @return
     * @throws IOException
     */
    public static String upload(MultipartFile file, String uploadPath) throws IOException {

        String finalFileName = "";
        if (file.getSize() > 0) {
            String originalFilename = file.getOriginalFilename();
            //获取源文件的后缀名
            String extName = originalFilename.substring(originalFilename.lastIndexOf("."));


            //获取年月
            SimpleDateFormat sdfYyyyMMdd = new SimpleDateFormat("yyyy-MM");
            finalFileName = sdfYyyyMMdd.format(new Date()) + "/";

            //获取日
            SimpleDateFormat sdfdd = new SimpleDateFormat("dd");
            finalFileName += sdfdd.format(new Date()) + "/";

            //获取时分秒
            SimpleDateFormat sdfHHmmss = new SimpleDateFormat("HHmmss");
            finalFileName += sdfHHmmss.format(new Date());

            //生成4位随机数字
            Integer rndNum = new Random().nextInt(1000)+9000;

            //拼接随机数字和后缀名
            finalFileName += rndNum + extName;

            //目标文件
            File f1 = new File(uploadPath+finalFileName);
            if (!f1.exists()) {
                f1.mkdirs();
            }
            //开始上传
            file.transferTo(f1);
        }
        return finalFileName;
    }

}

博主寄语

至此，系统到此完美结束，该案例通俗易懂，详细一步步带入，通过本案例，可提高你的学习能力以及训练自己的逻辑思维能力，认真学习的你很耀眼，相信你的技术一定会有一个质的飞跃，加油，努力练习，祝你成为你想要成为的人！

若在本项目中遇到技术难题，可在下方评论区留言或私信我，授人以鱼不如授人以渔

如果你觉得博主写的不错的话，不妨给个一键三连，点击下方小拳头即可一键三连。