利用Springboot+vue实现图片上传至数据库并显示的全过程

下面是利用Spring Boot和Vue实现图片上传至数据库并显示的全过程。

前置准备

技术栈

Spring Boot
Vue.js
axios
ElementUI
MySQL
MyBatis

下载代码

可以从GitHub上下载示例代码：https://github.com/KevinPang2019/springboot-vue-image-upload

实现步骤

1. 创建数据库表

在MySQL中创建一个名为image的数据库，然后在该数据库下创建一个名为image_info的表，包含ID、图片名称和图片内容三个字段。其中ID为自增主键。

CREATE DATABASE image;
USE image;
CREATE TABLE `image_info` (
  `id` bigint(20) NOT NULL AUTO_INCREMENT,
  `name` varchar(255) DEFAULT NULL,
  `content` longblob,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=1 DEFAULT CHARSET=utf8mb4;

2. 创建Spring Boot项目

使用Spring Initializr创建一个Spring Boot项目，并添加如下依赖项：

Spring Web
Spring Data JPA
MySQL Driver
Lombok

在application.properties文件中添加如下配置：

spring.datasource.url=jdbc:mysql://localhost:3306/image?serverTimezone=UTC&useUnicode=true&characterEncoding=utf8
spring.datasource.username=root
spring.datasource.password=root
spring.datasource.driver-class-name=com.mysql.cj.jdbc.Driver

spring.jpa.hibernate.ddl-auto=update
spring.jpa.properties.hibernate.dialect=org.hibernate.dialect.MySQL5InnoDBDialect

server.port=8080

3. 创建后端接口

3.1 Entity类

创建一个名为Image的实体类，包含ID、图片名称和图片内容三个字段，并添加@Entity和@Table注解。

@Entity
@Table(name = "image_info")
@Data
public class Image {
    @Id
    @GeneratedValue(strategy = GenerationType.IDENTITY)
    private Long id;

    private String name;

    @Lob
    @Basic(fetch = FetchType.LAZY)
    private byte[] content;
}

3.2 Dao接口

创建一个名为ImageDao的接口，继承JpaRepository，并在其中添加自定义方法。

public interface ImageDao extends JpaRepository<Image, Long> {
    Image findByName(String name);
}

3.3 Service类

创建一个名为ImageService的类，实现增加图片、获取图片列表和获取单个图片的功能。

@Service
public class ImageService {
    @Autowired
    private ImageDao imageDao;

    public void addImage(Image image) {
        imageDao.save(image);
    }

    public List<Image> getImages() {
        return imageDao.findAll();
    }

    public Image getImage(String name) {
        return imageDao.findByName(name);
    }
}

3.4 Controller类

创建一个名为ImageController的类，实现图片上传、获取图片列表和获取单张图片的接口。

@RestController
@RequestMapping("/image")
public class ImageController {
    @Autowired
    private ImageService imageService;

    @PostMapping("/upload")
    public void uploadImage(@RequestParam("file") MultipartFile file) {
        try {
            Image image = new Image();
            image.setName(file.getOriginalFilename());
            image.setContent(file.getBytes());
            imageService.addImage(image);
        } catch (IOException e) {
            e.printStackTrace();
        }
    }

    @GetMapping("/list")
    public List<Image> getImageList() {
        return imageService.getImages();
    }

    @GetMapping("/{name}")
    public ResponseEntity<byte[]> getImage(@PathVariable String name) {
        Image image = imageService.getImage(name);
        if (image == null) {
            return ResponseEntity.notFound().build();
        }
        return ResponseEntity.ok().contentType(MediaType.IMAGE_JPEG).body(image.getContent());
    }
}

4. 创建Vue项目

使用Vue CLI创建一个Vue项目，并添加如下依赖项：

axios
ElementUI

5. 创建前端页面

5.1 App.vue

在App.vue中，添加选择文件和上传文件的功能，并显示上传进度和上传结果。

<template>
  <el-container>
    <el-header style="background-color: #B3C0D1; text-align: center;">
      <h3>Spring Boot + Vue Image Upload</h3>
    </el-header>
    <el-main>
      <div class="upload-container">
        <el-upload ref="upload" :action="uploadUrl" :on-success="uploadSuccess"
                   :on-progress="uploadProgress" :show-file-list="false">
          <el-button size="small">{{ buttonText }}</el-button>
        </el-upload>
        <el-progress type="circle" :percentage="uploadPercentage" color="#409EFF"
                     v-if="showUploadProgress"></el-progress>
        <p v-if="uploadResult">{{ uploadResult }}</p>
      </div>
    </el-main>
  </el-container>
</template>

<script>
import axios from 'axios'

export default {
  name: 'app',
  data() {
    return {
      buttonText: '选择文件',
      uploadUrl: 'http://localhost:8080/image/upload',
      showUploadProgress: false,
      uploadPercentage: 0,
      uploadResult: ''
    }
  },
  methods: {
    uploadSuccess(response) {
      this.showUploadProgress = false
      this.uploadPercentage = 0
      this.uploadResult = response.data
    },
    uploadProgress(event) {
      if (event.total > 0) {
        this.showUploadProgress = true
        this.uploadPercentage = parseInt(event.loaded / event.total * 100)
      }
    }
  }
}
</script>

<style scoped>
.upload-container {
  text-align: center;
  margin-top: 20px;
}
</style>

5.2 main.js

在main.js中，添加导入ElementUI和设置axios的功能。

import Vue from 'vue'
import App from './App.vue'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import axios from 'axios'

Vue.use(ElementUI)

axios.defaults.baseURL = 'http://localhost:8080'
Vue.prototype.$http = axios

Vue.config.productionTip = false

new Vue({
  render: h => h(App)
}).$mount('#app')

6. 运行项目

在命令行中分别进入Spring Boot项目和Vue项目所在的文件夹，分别输入mvn spring-boot:run和npm run serve命令来启动项目。然后在浏览器中打开http://localhost:8081即可看到页面。

7. 示例说明

示例1：上传图片

点击“选择文件”按钮，选择一张图片文件。
点击“上传文件”按钮，上传文件。
上传进度条显示上传进度，上传完成后会显示“上传成功”。
在MySQL数据库中查看image_info表，可以看到图片已经被保存到数据库中。

示例2：显示图片

在“http://localhost:8081”，可以看到上传的图片列表。
点击图片名称，可以在页面中显示该张图片。

综上所述，这就是利用Spring Boot和Vue实现图片上传至数据库并显示的全过程。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：利用Springboot+vue实现图片上传至数据库并显示的全过程 - Python技术站