1秒搞懂Springboot+Element ui Vue图片上传回显

2023-12-11 08:07:01

前言

随着互联网的快速发展，图片上传功能已经成为许多Web应用程序不可或缺的一部分。Springboot+Element ui Vue是一个非常流行的前后端分离框架，它提供了丰富的功能和组件，可以帮助我们快速构建Web应用程序。在本文中，我们将介绍如何使用Springboot+Element ui Vue实现图片上传回显功能。

1. 准备工作

在开始之前，我们需要先准备以下内容：

一个Springboot项目
一个Element ui Vue项目
一个数据库

2. Springboot端代码

在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>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>

然后，我们需要在Springboot项目中创建以下实体类：

@Entity
public class Image {

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

    private String name;

    private String path;

    // 省略getter和setter方法
}

接下来，我们需要在Springboot项目中创建以下控制器：

@Controller
public class ImageController {

    @Autowired
    private ImageRepository imageRepository;

    @PostMapping("/upload")
    public String upload(@RequestParam("file") MultipartFile file) {
        try {
            Image image = new Image();
            image.setName(file.getOriginalFilename());
            image.setPath(UUID.randomUUID().toString());
            imageRepository.save(image);

            // 保存文件
            file.transferTo(new File("/path/to/save/" + image.getPath()));

            return "redirect:/success";
        } catch (Exception e) {
            return "redirect:/error";
        }
    }

    @GetMapping("/success")
    public String success() {
        return "success";
    }

    @GetMapping("/error")
    public String error() {
        return "error";
    }
}

3. Element ui Vue端代码

在Element ui Vue项目中，我们需要添加以下依赖：

import { ref, onMounted } from 'vue'
import { ElMessage } from 'element-plus'

然后，我们需要在Element ui Vue项目中创建以下组件：

<template>
  <div>
    <el-upload
      :action="uploadUrl"
      :headers="headers"
      :multiple="false"
      :auto-upload="false"
      :on-change="handleChange"
      :on-success="handleSuccess"
      :on-error="handleError"
    >
      <el-button>选择图片</el-button>
    </el-upload>
  </div>
</template>

<script>
export default {
  setup() {
    const uploadUrl = '/upload'
    const headers = { 'Content-Type': 'multipart/form-data' }
    const file = ref(null)

    const handleChange = (file, fileList) => {
      file.value = file
    }

    const handleSuccess = (response, file, fileList) => {
      ElMessage.success('图片上传成功')
      // 预览图片
      const reader = new FileReader()
      reader.onload = () => {
        const imageUrl = reader.result
        // TODO: 将imageUrl回显到前端
      }
      reader.readAsDataURL(file.raw)
    }

    const handleError = (err, file, fileList) => {
      ElMessage.error('图片上传失败')
    }

    onMounted(() => {
      // TODO: 获取图片回显数据
      // TODO: 将回显数据渲染到前端
    })

    return {
      uploadUrl,
      headers,
      file,
      handleChange,
      handleSuccess,
      handleError
    }
  }
}
</script>