Mr丶冷文

文章 分类 评论
125 10 7934

站点介绍

冷文学习者(KEVINLU98.COM),记录一个北漂小码农的日常业余生活
友链申请地址(直接评论即可): 传送门

(五)轮播图管理与文件上传(上)

MR丶冷文 2022-10-08 741 5条评论 个人博客项目视频教程 javaspringboot个人博客

首页 / 正文
Freewind主题v1.5版本已发布,下载请移步Freewind 1.5,同时还有主题伴生插件Freewind Markdown,下载请移步 Freewind Markdown,有问题请在留言板,交换友链请直接在友链留言,我创建了一个主题交流群,有兴趣可以加下: 点此加入
报毒我说明一下,是因为我把主题的版权信息做了加密,其中用了eval,杀毒软件认为eval函数是一个危险的操作,这点介意的话请勿下载,我也没有强迫任何人去下载,也没有向大家收取一分钱的主题费用,所以也犯不着因为这些事情来喷我,喜欢就用,不喜欢就不用,就这么简单

发布于2022-10-28

(五)轮播图管理与文件上传(上)

实体与数据库

  • 类名:Banner
  • 表名:blog_banner
属性类型备注
id整数主键
title字符串标题
link字符串跳转链接
cover字符串图片
ordered整数顺序
summary字符串描述信息

代码生成

属性列表

title----标题
link----跳转链接
cover----图片
ordered----顺序
summary----描述信息

实体代码抽取

package cn.kevinlu98.pojo;

import lombok.Getter;
import lombok.RequiredArgsConstructor;
import lombok.Setter;
import lombok.ToString;
import org.hibernate.Hibernate;

import javax.persistence.Entity;
import javax.persistence.GeneratedValue;
import javax.persistence.GenerationType;
import javax.persistence.Id;
import javax.persistence.Table;
import java.util.Objects;

/**
 * Author: Mr丶冷文
 * Date: 2022/10/7 15:45
 * Email: kevinlu98@qq.com
 * Description:
 */
@Getter
@Setter
@ToString
@RequiredArgsConstructor
@Entity
@Table(name = "blog_##{name-en}##")
public class ##{name-en-up}## {

    @Id
    @GeneratedValue(strategy = GenerationType.IDENTITY)
    private Integer ##{id}##; //主键

  ##{each}##
    private String ##{ename}##; //##{zname}##
  ##{endeach}##

    @Override
    public boolean equals(Object o) {
        if (this == o) return true;
        if (o == null || Hibernate.getClass(this) != Hibernate.getClass(o)) return false;
        ##{name-en-up}## ##{name-en}## = (##{name-en-up}##) o;
        return ##{id}## != null && Objects.equals(id, ##{name-en}##.##{id}##);
    }

    @Override
    public int hashCode() {
        return getClass().hashCode();
    }
}

完成基本操作

  • 利用代码生成器完成轮播图基本的增删查改操作
  • 定义轮播图管理的路由
  • 加入几条测试数据

页面改造

  • 修改展示图片的那列的内容为图片

    {
      title: '图片',
      field: 'cover',
      formatter: function (value) {
          return `<img src="${value}">`
      }
    },
  • 修改顺序那一列内容为输入框

    {
      title: '跳转链接',
      field: 'link',
      formatter: function (value) {
          return `<a href="${value}" target="_blank">${value}</a>`
      }
    },
  • 新增一个保存顺序的按钮

    <button type="button" id="lw-order-btn" class="btn btn-default"><i class="fa fa-refresh"></i> 保存顺序</button>
  • 修改编辑窗口加入文件上传功能

    <div class="form-group">
      <label>图片 </label>
      <br>
      <img id="lw-image-show" src="/static/admin/image/default.png"
           style="vertical-align: top;width: 60%;border: 1px solid #cccccc;" alt="">
      <button type="button" id="lw-upload-btn" class="btn btn-success"><i class="fa fa-image"></i>上传图片
      </button>
      <input id="lw-upload-hide" type="file" style="display: none">
      <input type="hidden" name="cover" required class="form-control" placeholder="请输入图片...">
    </div>
  • 默认图片:https://imagebed-1252410096.cos.ap-nanjing.myqcloud.com/203208/753ba1ed1898467c8f352c1931c152d8.png

文件上传

  • 在项目启动时将用户自定义的文件上传目录映射到/upload/路由
File dir = new File(baseDir);
if (!dir.isDirectory()) {
  // 创建目录
  dir.mkdirs();
}
String absolutePath = dir.getAbsolutePath().replace("./", "") + "/";
log.info("absolutePath:{}", absolutePath);
//  一定要在绝对路径前加上file://表明它是一个本地目录
registry.addResourceHandler("/upload/**").addResourceLocations("file://" + absolutePath);
  • 完成文件上传操作,按天分文件夹,文件名称为随机字符串
package cn.kevinlu98.controller;

import cn.kevinlu98.common.Result;
import cn.kevinlu98.enums.ResultEnum;
import lombok.extern.slf4j.Slf4j;
import org.springframework.beans.factory.annotation.Value;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.RestController;
import org.springframework.web.multipart.MultipartFile;

import java.io.File;
import java.io.IOException;
import java.text.DateFormat;
import java.text.SimpleDateFormat;
import java.util.Date;
import java.util.Objects;
import java.util.UUID;


/**
 * Author: Mr丶冷文
 * Date: 2022/10/8 11:24
 * Email: kevinlu98@qq.com
 * Description:
 */
@Slf4j
@RestController
@RequestMapping("/admin/")
public class UploadController {

    @Value("${upload.base-dir}")
    private String baseDir;

    private static final DateFormat DATA_FORMAT = new SimpleDateFormat("yyyyMMdd/");

    @PostMapping("/upload")
    public Result<String> upload(@RequestParam MultipartFile file) {

        if (!baseDir.endsWith("/")) {
            baseDir += "/";
        }
        // 生成时间分区的目录
        String dateName = DATA_FORMAT.format(new Date());
        String folderPath = baseDir + dateName;
        File folder = new File(folderPath);
        if (!folder.isDirectory()) {
            folder.mkdirs();
        }
        //取上传目录的绝对路径
        String absPath = folder.getAbsolutePath().replace("./", "") + "/";
        //取文件后缀
        String suffix = Objects.requireNonNull(file.getOriginalFilename()).substring(file.getOriginalFilename().lastIndexOf("."), file.getOriginalFilename().length());
        //生成文件名
        String filename = UUID.randomUUID().toString().replace("-", "") + suffix;
        try {
            //上传到服务器
            file.transferTo(new File(absPath + "/" + filename));
        } catch (IOException e) {
            log.error(e.getMessage(), e);
            return Result.error(ResultEnum.RESULT_UPLOAD_FAIL);
        }
        return Result.success("/upload/" + dateName + "/" + filename);
    }
}
  • 在管理页面完成js文件上传操作
$('#lw-upload-hide').on('change', function () {
  let file = this.files[0]
  let fd = new FormData();
  fd.append('file', file);
  $.ajax({
    url: '/admin/upload',
    method: 'post',
    data: fd,
    dataType: 'json',
    processData: false,
    contentType: false,
    success: res => {
      if (res.code === 200) {
        $('#lw-image-show').attr('src', res.data);
        $('#data-form [name=cover]').val(res.data);
      } else {
        layer.msg(res.message, {icon: 2})
      }
    }
  })
})

评论(5)

  1. 游客1111 游客 2023-11-07 22:30 回复

    原来你也玩原神!~!!!!!!

  2. su 游客 2023-09-02 10:29 回复

    学习

  3. a 游客 2023-04-10 12:33 回复

    学习

  4. zyf 游客 2022-10-26 15:44 回复

    windows环境下一直报错,可以正常上传,但是从upload目录下读取图片的时候一直报500的错误,找了一下错误好像是路径的问题,修改了一下config可以正常运行了。windows操作系统可以参考一下 


    String absolutePath = dir.getAbsolutePath().replace(".\\", "") + "\\";

    log.info("absolutePath:{}", absolutePath);
    // 一定要在绝对路径前加上file://表明它是一个本地目录
    registry.addResourceHandler("/upload/**").addResourceLocations("file:" + absolutePath);

    1. 游客1111 游客 2023-11-07 22:42 回复

      @zyf

      赞,直接解决报错

热门文章

最新评论

  • 辛阳

    下载试试看,谢谢

  • 叶秋

    主题真的太棒了

  • klees

    学习一下

  • 老法师

     这个主题真的太棒了

  • 普保雄

    谢谢了

日历

2024年03月

     12
3456789
10111213141516
17181920212223
24252627282930
31      

文章目录

站点公告
Freewind主题v1.5版本已发布,下载请移步Freewind 1.5,同时还有主题伴生插件Freewind Markdown,下载请移步 Freewind Markdown,有问题请在留言板,交换友链请直接在友链留言,我创建了一个主题交流群,有兴趣可以加下: 点此加入
报毒我说明一下,是因为我把主题的版权信息做了加密,其中用了eval,杀毒软件认为eval函数是一个危险的操作,这点介意的话请勿下载,我也没有强迫任何人去下载,也没有向大家收取一分钱的主题费用,所以也犯不着因为这些事情来喷我,喜欢就用,不喜欢就不用,就这么简单
点击小铃铛关闭