Spring Boot与Vue.js：从上传图片到返回URL的完整指南

2023-09-04 14:52:45

前端实现

1. 安装Vue.js和ElementUI

首先，我们需要在项目中安装Vue.js和ElementUI。您可以使用以下命令：

npm install vue
npm install element-ui

2. 创建Vue组件

接下来，我们需要创建一个Vue组件来处理图片上传。这个组件将包含一个文件选择器，一个按钮来触发上传，以及一个显示上传进度的进度条。

// UploadImage.vue
<template>
  <div class="upload-image">
    <el-upload
      :action="uploadUrl"
      :show-file-list="false"
      :on-success="handleSuccess"
      :on-progress="handleProgress"
    >
      <el-button type="primary">上传图片</el-button>
    </el-upload>
    <el-progress :percentage="progress" :stroke-width="18"></el-progress>
  </div>
</template>

<script>
import { ref } from 'vue'
import { ElUpload, ElProgress } from 'element-ui'

export default {
  components: {
    ElUpload,
    ElProgress
  },
  setup() {
    const uploadUrl = 'http://localhost:8080/api/upload'
    const progress = ref(0)

    const handleSuccess = (response) => {
      console.log(response)
    }

    const handleProgress = (event) => {
      progress.value = event.percent
    }

    return {
      uploadUrl,
      progress,
      handleSuccess,
      handleProgress
    }
  }
}
</script>

3. 注册组件

最后，我们需要在Vue实例中注册这个组件。

// main.js
import { createApp } from 'vue'
import App from './App.vue'
import UploadImage from './components/UploadImage.vue'

const app = createApp(App)

app.component('UploadImage', UploadImage)

app.mount('#app')

后端实现

1. 导入依赖

首先，我们需要在SpringBoot项目中导入必要的依赖。

<dependency>
  <groupId>org.springframework.boot</groupId>
  <artifactId>spring-boot-starter-web</artifactId>
</dependency>
<dependency>
  <groupId>org.springframework.boot</groupId>
  <artifactId>spring-boot-starter-data-jpa</artifactId>
</dependency>
<dependency>
  <groupId>com.h2database</groupId>
  <artifactId>h2</artifactId>
  <scope>runtime</scope>
</dependency>

2. 创建实体类

接下来，我们需要创建一个实体类来存储图片元数据。

import javax.persistence.*;

@Entity
@Table(name = "images")
public class Image {

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

  private String name;

  private String url;

  // getters and setters
}

3. 创建Repository

接下来，我们需要创建一个Repository来操作图片实体。

import org.springframework.data.jpa.repository.JpaRepository;

public interface ImageRepository extends JpaRepository<Image, Long> {

}

4. 创建Controller

最后，我们需要创建一个Controller来处理文件上传请求。

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.*;
import org.springframework.web.multipart.MultipartFile;

import java.io.IOException;

@RestController
@RequestMapping("/api/upload")
public class UploadController {

  @Autowired
  private ImageRepository imageRepository;

  @PostMapping
  public Image upload(@RequestParam("file") MultipartFile file) throws IOException {
    String fileName = file.getOriginalFilename();
    String url = "http://localhost:8080/images/" + fileName;
    Image image = new Image();
    image.setName(fileName);
    image.setUrl(url);
    imageRepository.save(image);
    return image;
  }
}