SpringBoot + Vue + 阿里云对象存储 实现文件上传下载（附前后端代码）

在项目中需要进行存储文件如：图片、Word、PDF时，因为所占的空间比较大，不适合存储在数据库中，所以使用了阿里云进行存储这些数据，在数据库中存储阿里云的访问地址即可。

1.准备工作

在使用前需要先注册一个阿里云账号并开通对象存储OSS服务，并创建Bucket以及获取自己的秘钥，相关准备工作请查看之前发布的这一篇博客

使用java将本地数据上传到阿里云_qq_54759193的博客-CSDN博客

2. 前端代码

在前端我们主要是通过使用element-ui的上传组件，可以让用户通过点击此上传按钮可以选择本地的文件进行上传，并在在上传验证上传的文件是否符合要求，上传成功或失败后会做相关处理，详细代码如下

上传按钮：
在element-ui中有许多的组件，这个上传按钮就是根据element-ui中的上传组件中进行修改的

<el-upload
          class="upload"
          drag
          name="file"
          :action="uploadUrl"
          :headers="tokenInfo"
          :before-upload="beforeAvatarUpload"
          :on-success="handleAvatarSuccess"
          :on-error="handleError"
          >
          <i class="el-icon-upload"></i>
          <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
          <div class="el-upload__tip" slot="tip">只能上传 PDF 或 Word 文件，且不超过2Mb</div>
</el-upload>

属性解读：
class用于绑定样式
drag启用拖拽上传功能，允许用户将文件拖动到上传区域进行上传。
:action用于存储访问后端的路径
:headers是用于添加请求头信息的
:before-upload是用于绑定上传前的判断数据格式是否正确的方法
:on-success和:on-error分别是用于绑定上传成功和上传失败之后执行的方法
:limit 是用于设置最大的上传文件数，我这里设置了只能上传一个文件

相关方法：

//文件上传相关
//上传成功后执行
handleAvatarSuccess(res, file) {
    this.dataForm.contractPath = res.msg;
},
//上传前执行（对上传的文件判断是否为PDF或Word，且大小不大于2MB）
beforeAvatarUpload(file) {
    const isPDF = file.type === "application/pdf";
    const isWord =
    file.type === "application/msword" ||
    file.type ===
    "application/vnd.openxmlformats-officedocument.wordprocessingml.document";
    const isLt2M = file.size / 1024 / 1024 < 2;

    if (!isPDF && !isWord) {
        this.$message.error("只能上传 PDF 或 Word 文件");
        return false;
    }

    if (!isLt2M) {
        this.$message.error("上传文件大小不能超过 2MB");
          return false;
    }

    return true;
},
//上传失败后执行
handleError(error, file) {
// 处理上传失败的逻辑
    console.log("上传失败");
},

3. 后端代码

后端封装好了一个工具类，在接收前端发送的请求后调用该工具类进行上传操作

阿里云文件上传相关工具类代码如下：

package com.wedu.modules.chenqi.util;

import com.aliyun.oss.OSS;
import com.aliyun.oss.OSSClientBuilder;
import lombok.Data;
import org.springframework.boot.context.properties.ConfigurationProperties;
import org.springframework.stereotype.Component;
import org.springframework.web.multipart.MultipartFile;

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

/**
 * 阿里云 OSS 工具类
 * @author ASUS
 */
@Data
@Component
public class AliOSSUtils {
    // Endpoint以华东1（杭州）为例，其它Region请按实际情况填写。
    private String endpoint = "https://oss-cn-hangzhou.aliyuncs.com";
    // 填写Bucket名称，例如examplebucket。
    private String bucketName = "examplebucket";
    // STS临时访问密钥AccessKey ID和AccessKey Secret。
    private String accessKeyId = "yourAccessKeyId";
    private String accessKeySecret = "yourAccessKeySecret";
    

    /**
     * 实现上传到OSS
     */
    public String upload(MultipartFile file) throws IOException {
        // 获取上传的文件的输入流
        InputStream inputStream = file.getInputStream();

        // 避免文件覆盖
        String originalFilename = file.getOriginalFilename();
        String fileName = UUID.randomUUID().toString() + originalFilename.substring(originalFilename.lastIndexOf("."));

        //上传文件到 OSS
        OSS ossClient = new OSSClientBuilder().build(endpoint, accessKeyId, accessKeySecret);
        ossClient.putObject(bucketName, fileName, inputStream);

        //文件访问路径
        String url = endpoint.split("//")[0] + "//" + bucketName + "." + endpoint.split("//")[1] + "/" + fileName;
        // 关闭ossClient
        ossClient.shutdown();
        return url;
        // 把上传到oss的路径返回
    }

}

注意：endpoind、bucketName、accessKey ID和accessKey Secret需工具自身情况进行填写，不止到怎么获取的请查看这篇博客使用java将本地数据上传到阿里云_qq_54759193的博客-CSDN博客

接收请求并调用工具类进行文件上传操作代码如下：

package com.wedu.modules.chenqi.controller;

import com.wedu.common.utils.R;
import com.wedu.modules.chenqi.util.AliOSSUtils;
import lombok.extern.slf4j.Slf4j;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RestController;
import org.springframework.web.multipart.MultipartFile;

/**
 * UploadController
 *
 * @author: X7
 * @date: 2023/8/1 17:33
 */

@Slf4j
@RestController
public class UploadController {
    @Autowired
    private AliOSSUtils aliOSSUtils;

    @PostMapping("/upload")
    public R upload(MultipartFile file) throws Exception{
        log.info("文件上传，文件名：{}",file.getOriginalFilename());
        String url = aliOSSUtils.upload(file);
        log.info("文件上传完成，文件访问的url为：{}",url);
        return R.ok(url);
    }
}

注意@PostMapping注解的路径和前端上传按钮中 action 的值一致，请求参数名称 file 和前端上传按钮中 name 的值一致