SpringBoot + Vue之文件上传，让你的博客飞起来

2023-12-31 00:50:17

正文

1. 前言

SpringBoot 和 Vue 是当今流行的前后端开发框架，它们可以帮助我们轻松构建出功能强大的应用程序。在构建博客时，我们通常需要实现文件上传功能，以便用户可以上传图片、视频等文件。本文将分享SpringBoot + Vue文件上传功能的实现，希望对您有所帮助。

2. 环境搭建

在开始之前，我们需要先搭建好SpringBoot + Vue的环境。这里我使用的是SpringBoot 2.6.2和Vue 3.2.28。

# 首先，我们需要创建一个SpringBoot项目
mvn spring-boot:start-project --groupId=com.example --artifactId=springboot-vue --name=springboot-vue

# 然后，我们需要创建一个Vue项目
vue create vue-project

# 最后，我们需要将SpringBoot项目和Vue项目关联起来
cd springboot-vue
mvn spring-boot:run
cd vue-project
npm run serve

3. 文件上传

在搭建好环境之后，我们就可以开始实现文件上传功能了。SpringBoot中，我们可以使用MultipartFile来处理文件上传。Vue中，我们可以使用FormData来处理文件上传。

// SpringBoot中的文件上传
@PostMapping("/upload")
public String upload(@RequestParam("file") MultipartFile file) {
    // 保存文件
    try {
        file.transferTo(new File("D:/upload/" + file.getOriginalFilename()));
    } catch (IOException e) {
        e.printStackTrace();
        return "上传失败";
    }

    // 返回成功信息
    return "上传成功";
}

// Vue中的文件上传
const formData = new FormData();
formData.append("file", file);

axios.post("/upload", formData, {
    headers: {
        "Content-Type": "multipart/form-data",
    },
}).then((response) => {
    console.log(response.data);
});

4. 图片上传

在实现了一般文件上传之后，我们还可以实现图片上传。图片上传与一般文件上传的区别在于，图片上传需要对图片进行压缩和裁剪。

// SpringBoot中的图片上传
@PostMapping("/uploadImage")
public String uploadImage(@RequestParam("file") MultipartFile file) {
    // 保存文件
    try {
        file.transferTo(new File("D:/upload/" + file.getOriginalFilename()));
    } catch (IOException e) {
        e.printStackTrace();
        return "上传失败";
    }

    // 压缩图片
    BufferedImage image = ImageIO.read(file);
    Image compressedImage = image.getScaledInstance(100, 100, Image.SCALE_SMOOTH);

    // 裁剪图片
    BufferedImage croppedImage = new BufferedImage(100, 100, BufferedImage.TYPE_INT_RGB);
    Graphics2D g2d = croppedImage.createGraphics();
    g2d.drawImage(compressedImage, 0, 0, null);
    g2d.dispose();

    // 保存图片
    ImageIO.write(croppedImage, "jpg", new File("D:/upload/" + file.getOriginalFilename()));

    // 返回成功信息
    return "上传成功";
}

// Vue中的图片上传
const formData = new FormData();
formData.append("file", file);

axios.post("/uploadImage", formData, {
    headers: {
        "Content-Type": "multipart/form-data",
    },
}).then((response) => {
    console.log(response.data);
});

5. 视频上传

在实现了一般文件上传和图片上传之后，我们还可以实现视频上传。视频上传与一般文件上传的区别在于，视频上传需要对视频进行转码。

// SpringBoot中的视频上传
@PostMapping("/uploadVideo")
public String uploadVideo(@RequestParam("file") MultipartFile file) {
    // 保存文件
    try {
        file.transferTo(new File("D:/upload/" + file.getOriginalFilename()));
    } catch (IOException e) {
        e.printStackTrace();
        return "上传失败";
    }

    // 转码视频
    String inputPath = "D:/upload/" + file.getOriginalFilename();
    String outputPath = "D:/upload/" + file.getOriginalFilename() + ".mp4";
    FFmpeg ffmpeg = new FFmpeg();
    ffmpeg.setInput(inputPath);
    ffmpeg.setOutput(outputPath);
    ffmpeg.execute();

    // 返回成功信息
    return "上传成功";
}

// Vue中的视频上传
const formData = new FormData();
formData.append("file", file);

axios.post("/uploadVideo", formData, {
    headers: {
        "Content-Type": "multipart/form-data",
    },
}).then((response) => {
    console.log(response.data);
});