Springboot与前端图片交互（三）

Springboot与前端图片交互（三）

在特殊的情况下会将一些文件写入到数据库中，效率不如在磁盘存储高。

数据库设计：

为了能够存储大文件，采用bolb格式，BLOB是一个二进制大型对象，是一个可以存储大量数据的容器，它能容纳不同大小的数据。

MySQL的四种BLOB类型

类型	大小(单位：字节)
TinyBlob	最大 255
Blob	最大 65K
MediumBlob	最大 16M
LongBlob	最大 4G

考虑到图片储存的大小，这里我们选择MediumBlob类型。

业务代码-上传

Controller层

    //文件上传 将文件保存到数据库
    @PostMapping("/postpicdata")
    private void upLoadDatabase(@RequestParam("file") MultipartFile multipartFile) throws IOException {
        String name = multipartFile.getOriginalFilename();
        byte[] bytes = multipartFile.getBytes();
        Pic pic = new Pic();
        pic.setName(name);
        pic.setPic_data(bytes);
        picService.addPicDatabaseService(pic);
    }

pic实体类

public class Pic {
    private Integer id;
    private String name;
    private byte[] pic_data;

    public Integer getId() {
        return id;
    }

    public void setId(Integer id) {
        this.id = id;
    }

    public String getName() {
        return name;
    }

    public void setName(String name) {
        this.name = name;
    }

    public byte[] getPic_data() {
        return pic_data;
    }

    public void setPic_data(byte[] pic_data) {
        this.pic_data = pic_data;
    }

    @Override
    public String toString() {
        return "pic{" +
                "id=" + id +
                ", name='" + name + '\'' +
                ", pic_data=" + Arrays.toString(pic_data) +
                '}';
    }
}

dao层

@Insert("INSERT INTO loveweb.pic (name,pic_data) VALUES(#{name},#{pic_data});")
int addPicData(Pic pic);

service层

int addPicDatabaseService(Pic pic);

@Override
public int addPicDatabaseService(Pic pic) {
    return picDao.addPicData(pic);
}

图片显示

Controller层

@GetMapping("/getpicdata/{id}")
private byte[] gtePicData(@PathVariable("id") int id){
    Pic pic = picService.getPicDatabaseService(id);
    return pic.getPic_data();
}

dao层

@Select("SELECT * FROM loveweb.pic WHERE id=#{id};")
Pic getPicDatabase(int id);

service层

Pic getPicDatabaseService(int id);

@Override
public Pic getPicDatabaseService(int id) {
    return picDao.getPicDatabase(id);
}

前端

<template>
  <div>
    <el-upload action="http://localhost:8887/postpicdata">
      <el-button size="small" type="primary">点击上传</el-button>
    </el-upload>
    <el-button @click="btn">显示</el-button>
    <br>
    <el-image :src="src"></el-image>
  </div>
</template>

<script>
    import Axios from 'axios';
    export default {
        name: "picDatabase",
      data () {
        return {
          src:''
        }
      },
      methods:{
        async btn(){
          const res = await Axios({url:"http://localhost:8887/getpicdata/1",method:'get',responseType:'blob'})
          let blob = new window.Blob([res.data]);
          let url = window.URL.createObjectURL(blob);
          this.src = url;
        }
      }
    }
</script>

<style scoped>

</style>

演示：

上传：

数据库储存：

前端显示：

注意：

@RequestParam("file") MultipartFile multipartFile要和Header请求头参数对应