怎么用Springboot+vue实现图片上传至数据库并显示

引言

在现代Web应用开发中，图片上传和显示是一个非常常见的需求。无论是社交媒体、电子商务平台还是内容管理系统，用户都需要上传图片并在页面上展示。本文将详细介绍如何使用Spring Boot和Vue.js实现图片上传至数据库并显示的功能。

技术栈

• 后端: Spring Boot
• 前端: Vue.js
• 数据库: MySQL
• 文件存储: 数据库存储图片的二进制数据

项目结构

在开始之前，我们先来看一下项目的整体结构：

springboot-vue-image-upload/
├── backend/
│   ├── src/
│   │   ├── main/
│   │   │   ├── java/
│   │   │   │   └── com/
│   │   │   │       └── example/
│   │   │   │           └── imageupload/
│   │   │   │               ├── controller/
│   │   │   │               │   └── ImageController.java
│   │   │   │               ├── model/
│   │   │   │               │   └── Image.java
│   │   │   │               ├── repository/
│   │   │   │               │   └── ImageRepository.java
│   │   │   │               └── service/
│   │   │   │                   └── ImageService.java
│   │   │   └── resources/
│   │   │       ├── application.properties
│   │   │       └── static/
│   │   └── test/
│   └── pom.xml
├── frontend/
│   ├── public/
│   ├── src/
│   │   ├── assets/
│   │   ├── components/
│   │   │   └── ImageUpload.vue
│   │   ├── router/
│   │   ├── store/
│   │   ├── views/
│   │   ├── App.vue
│   │   └── main.js
│   ├── package.json
│   └── vue.config.js
└── README.md

后端实现

1. 创建Spring Boot项目

首先，我们需要创建一个Spring Boot项目。可以使用Spring Initializr来快速生成项目结构。

选择以下依赖：

• Spring Web
• Spring Data JPA
• MySQL Driver

2. 配置数据库

在application.properties文件中配置MySQL数据库连接：

spring.datasource.url=jdbc:mysql://localhost:3306/image_upload
spring.datasource.username=root
spring.datasource.password=yourpassword
spring.jpa.hibernate.ddl-auto=update

3. 创建实体类

创建一个Image实体类，用于映射数据库中的图片表：

package com.example.imageupload.model;

import javax.persistence.*;

@Entity
public class Image {

    @Id
    @GeneratedValue(strategy = GenerationType.IDENTITY)
    private Long id;

    @Lob
    private byte[] data;

    private String name;

    private String type;

    // Getters and Setters
}

4. 创建Repository接口

创建一个ImageRepository接口，用于操作数据库：

package com.example.imageupload.repository;

import com.example.imageupload.model.Image;
import org.springframework.data.jpa.repository.JpaRepository;

public interface ImageRepository extends JpaRepository<Image, Long> {
}

5. 创建Service层

创建一个ImageService类，用于处理业务逻辑：

package com.example.imageupload.service;

import com.example.imageupload.model.Image;
import com.example.imageupload.repository.ImageRepository;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
import org.springframework.web.multipart.MultipartFile;

import java.io.IOException;

@Service
public class ImageService {

    @Autowired
    private ImageRepository imageRepository;

    public Image saveImage(MultipartFile file) throws IOException {
        Image image = new Image();
        image.setName(file.getOriginalFilename());
        image.setType(file.getContentType());
        image.setData(file.getBytes());
        return imageRepository.save(image);
    }

    public Image getImage(Long id) {
        return imageRepository.findById(id).orElse(null);
    }
}

6. 创建Controller层

创建一个ImageController类，用于处理HTTP请求：

package com.example.imageupload.controller;

import com.example.imageupload.model.Image;
import com.example.imageupload.service.ImageService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.http.HttpStatus;
import org.springframework.http.ResponseEntity;
import org.springframework.web.bind.annotation.*;
import org.springframework.web.multipart.MultipartFile;

import java.io.IOException;

@RestController
@RequestMapping("/api/images")
public class ImageController {

    @Autowired
    private ImageService imageService;

    @PostMapping("/upload")
    public ResponseEntity<Image> uploadImage(@RequestParam("file") MultipartFile file) throws IOException {
        Image image = imageService.saveImage(file);
        return new ResponseEntity<>(image, HttpStatus.CREATED);
    }

    @GetMapping("/{id}")
    public ResponseEntity<byte[]> getImage(@PathVariable Long id) {
        Image image = imageService.getImage(id);
        return ResponseEntity.ok()
                .header("Content-Type", image.getType())
                .body(image.getData());
    }
}

前端实现

1. 创建Vue项目

使用Vue CLI创建一个新的Vue项目：

vue create frontend

2. 安装Axios

在Vue项目中安装Axios，用于发送HTTP请求：

cd frontend
npm install axios

3. 创建ImageUpload组件

在src/components/目录下创建一个ImageUpload.vue组件：

<template>
  <div>
    <h1>Image Upload</h1>
    <input type="file" @change="handleFileUpload" />
    <button @click="uploadImage">Upload</button>
    <div v-if="imageUrl">
      <h2>Uploaded Image</h2>
      <img :src="imageUrl" alt="Uploaded Image" />
    </div>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      file: null,
      imageUrl: null,
    };
  },
  methods: {
    handleFileUpload(event) {
      this.file = event.target.files[0];
    },
    async uploadImage() {
      if (!this.file) {
        alert('Please select a file first.');
        return;
      }

      const formData = new FormData();
      formData.append('file', this.file);

      try {
        const response = await axios.post('http://localhost:8080/api/images/upload', formData, {
          headers: {
            'Content-Type': 'multipart/form-data',
          },
        });

        this.imageUrl = `http://localhost:8080/api/images/${response.data.id}`;
      } catch (error) {
        console.error('Error uploading image:', error);
      }
    },
  },
};
</script>

<style scoped>
img {
  max-width: 100%;
  height: auto;
}
</style>

4. 在App.vue中使用ImageUpload组件

在src/App.vue中使用ImageUpload组件：

<template>
  <div id="app">
    <ImageUpload />
  </div>
</template>

<script>
import ImageUpload from './components/ImageUpload.vue';

export default {
  name: 'App',
  components: {
    ImageUpload,
  },
};
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

5. 配置Vue项目代理

在vue.config.js中配置代理，以便在开发环境中解决跨域问题：

module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: 'http://localhost:8080',
        changeOrigin: true,
      },
    },
  },
};

运行项目

1. 启动后端服务

在backend目录下运行以下命令启动Spring Boot应用：

mvn spring-boot:run

2. 启动前端服务

在frontend目录下运行以下命令启动Vue开发服务器：

npm run serve

3. 访问应用

打开浏览器，访问http://localhost:8081，你将看到一个图片上传的界面。选择一张图片并点击上传按钮，图片将被上传到数据库并在页面上显示。

总结

通过本文的介绍，我们学习了如何使用Spring Boot和Vue.js实现图片上传至数据库并显示的功能。后端使用Spring Boot处理文件上传和数据库存储，前端使用Vue.js实现用户界面和文件上传逻辑。希望本文对你有所帮助，欢迎在评论区留言讨论。