springboot整合vue上传文件至oss

引言

在现代Web应用中，文件上传是一个常见需求。而将文件存储在云存储服务（如阿里云OSS、AWS S3等）则是一个优雅且高效的解决方案。本文将使用Spring Boot作为后端框架，Vue作为前端框架，演示如何实现文件上传至阿里云OSS服务。

准备工作

在开始之前，确保你已经具备以下准备工作：

• Java开发环境和IDE（如IntelliJ IDEA、Eclipse等）
• Node.js和npm安装
• 阿里云账号，并开通OSS服务
• Vue CLI（用于快速搭建Vue项目）

后端开发：Spring Boot

创建文件上传的工具类UploadUtil.java

代码如下：

package com.wedu.modules.platform.utils;

import com.aliyun.oss.OSS;
import com.aliyun.oss.OSSClientBuilder;
import org.apache.commons.io.FilenameUtils;
import org.springframework.web.multipart.MultipartFile;

import java.io.IOException;
import java.util.UUID;

public class UploadUtil {
    //阿里域名
    public static final String ALI_DOMAIN = "https://dh-lovesc.oss-cn-nanjing.aliyuncs.com/";

    public static String uploadImage(MultipartFile file) throws IOException {
        //生成文件名
        String originalFilename = file.getOriginalFilename();
        String ext = "." + FilenameUtils.getExtension(originalFilename);
        String uuid = UUID.randomUUID().toString().replace("-","");
        String filename = uuid + ext;

        //地域节点
        String endpoint = "http://oss-cn-nanjing.aliyuncs.com";
        String accessKeyId = "LTAI5tCWXhVt4nDdpmuecC6B";
        String accessKeySecret = "OgvFdn2dadJhT3I3Wk6YzbqabpYw0I";

        //oss客户端对象
       OSS ossClient = new OSSClientBuilder().build(endpoint,accessKeyId,accessKeySecret);
       ossClient.putObject("dh-lovesc", filename,file.getInputStream());
        ossClient.shutdown();

        return ALI_DOMAIN + filename;
    }
}

写一个Controller接口进行文件上传：

@PostMapping("/ossFile")
    public String upload(@RequestParam MultipartFile file) throws IOException {
        return UploadUtil.uploadImage(file);

    }

前端

创建vue项目，编写文件上传组件

 <div class="oss-file">
      <h1>oss上传</h1>
      <el-upload
        action="#"
        list-type="picture-card"
        :before-upload="uploadfile"
      >
        <img
          v-if="ossImageUrl"
          :src="ossImageUrl"
          class="avatar"
          width="100%"
        />
        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
      </el-upload>
    </div>

export default {
  data() {
    return {
      dialogImageUrl: "", //本地图片路径
      ossImageUrl: "", //oss图片路径
      minioImageUrl: "", //minio路径
    };
  },
  methods: {
    uploadfile(file) {
      // 创建一个 FormData 对象
      let formData = new FormData();
      formData.append("file", file);
      this.$http({
        method: "post",
        url: this.$http.adornUrl("/platform/uploadFile/localFile"),
        headers: {
          "Content-Type": "multipart/form-data",
        },
        data: formData,
      })
        .then((response) => {
          if (response.status === 200) {
            this.dialogImageUrl = response.data.imageUrl;

            alert("上传成功");
          } else {
            alert("上传失败");
          }
        })
        .catch(() => {});
    },