Springboot集成阿里云对象存储oss-前端-后端完整实现

1.注册阿里云并购买套餐流量包

2.点击套餐买个流量包，5元半年40g，还挺便宜

 

 3.购买后进入管理控制台-点开对象存储oss

4.点开bucket创建，我已经创建好了

 

 5.需要复制每个人的外网访问，这个到时候需要在springboot项目中配置

 6.点击个人头像创建每个人自己的key

 

 这一步至关重要，涉及到你是否能使用成功，创建成功后项目也需要用到key和密码，这是我个人的。

                                阿里云服务一切准备完成开始集成springboot

1.导入阿里云依赖

        <!-- 阿里云OSS文件上传开始 -->
        <!-- 阿里云 OSS -->
        <dependency>
            <groupId>com.aliyun.oss</groupId>
            <artifactId>aliyun-sdk-oss</artifactId>
            <version>3.14.1</version>
        </dependency>
        <!--日期时间工具-->
        <dependency>
            <groupId>joda-time</groupId>
            <artifactId>joda-time</artifactId>
            <version>2.10.14</version>
        </dependency>
        <dependency>
            <groupId>commons-io</groupId>
            <artifactId>commons-io</artifactId>
            <version>2.4</version>
        </dependency>
        <!-- 阿里云OSS文件上传结束 -->

        2.需要配置阿里云的相关配置，找到application.properties文件，这里需要配置个人的

               配置说明

#OSS配置
aliyun.oss.file.endpoint=设置外网访问连接
aliyun.oss.file.keyid=  Keyid
aliyun.oss.file.keysecret=  key密码
#bucket名称
aliyun.oss.file.bucketname=自己设置的buket名称

再次说明：外网访问连接在阿里云控制台->对象存储->Bucket列表->概念->复制地域节点

 

3.在项目中创建实例类，不要忘了存入容器中，要和配置类得字段名一致

package com.laoyang.Config.Oss;

import lombok.Data;
import org.springframework.boot.context.properties.ConfigurationProperties;
import org.springframework.stereotype.Component;

/**
 * @author:Kevin
 * @create: 2022-09-07 19:57
 * @Description:
 */
@Data
@Component
@ConfigurationProperties(prefix = "aliyun.oss.file")
public class OssProperties {
    private String endPoint;
    private String keyId;
    private String keySecret;
    private String bucketName;

}

4.业务层实现文件上传与删除

package com.laoyang.service;

import org.springframework.web.multipart.MultipartFile;

public interface FileService {
    /**
     * 文件上传
     * @param file 文件上传对象
     * @param module 文件夹名称
     * @return
     */
    String upload(MultipartFile file, String module);
    /**
     * 删除文件
     * @param url
     */
    void deleteFile(String url);
}

5.业务层的实现类

package com.laoyang.service.impl;

import com.aliyun.oss.OSS;
import com.aliyun.oss.OSSClientBuilder;
import com.laoyang.Config.Oss.OssProperties;
import com.laoyang.service.FileService;
import org.apache.commons.io.FilenameUtils;
import org.joda.time.DateTime;
import org.springframework.stereotype.Service;
import org.springframework.transaction.annotation.Transactional;
import org.springframework.web.multipart.MultipartFile;

import javax.annotation.Resource;
import java.io.IOException;
import java.io.InputStream;
import java.util.UUID;

/**
 * @author:Kevin
 * @create: 2022-09-07 20:00
 * @Description:
 */
@Service
@Transactional
public class FileServiceImpl implements FileService {
    /**
     * 文件上传
     */
    @Resource
    private OssProperties ossProperties;
    /**
     * 文件上传
     *
     * @param file 文件上传对象
     * @param module 文件夹名称
     * @return
     */
    @Override
    public String upload(MultipartFile file, String module) {
        //获取地域节点
        String endPoint = ossProperties.getEndPoint();
        //获取AccessKeyId
        String keyId = ossProperties.getKeyId();
        //获取AccessKeySecret
        String keySecret = ossProperties.getKeySecret();
        //获取BucketName
        String bucketName = ossProperties.getBucketName();
        try {
        //创建OSSClient实例
            OSS ossClient = new OSSClientBuilder().build(endPoint, keyId,
                    keySecret);
        //上传文件流
            InputStream inputStream = file.getInputStream();
        //获取旧名称
            String originalFilename = file.getOriginalFilename();
        //获取文件后缀名
            String extension = FilenameUtils.getExtension(originalFilename);
        //将文件名重命名
            String newFileName = UUID.randomUUID().toString()
                    .replace("-", "")+"."+extension;
        //使用当前日期进行分类管理
            String datePath = new DateTime().toString("yyyy/MM/dd");
        //构建文件名
            newFileName = module + "/" + datePath + "/" + newFileName;
        //调用OSS文件上传的方法
            ossClient.putObject(bucketName, newFileName, inputStream);
        //关闭OSSClient
            ossClient.shutdown();
        //返回文件地址
            return "https://"+bucketName+"."+endPoint+"/"+newFileName;
        } catch (IOException e) {
            e.printStackTrace();
        }
        return null;
    }


    /**
     * 删除文件
     * @param url
     */
    @Override
    public void deleteFile(String url) {
            //获取地域节点
        String endPoint = ossProperties.getEndPoint();
            //获取AccessKeyId
        String keyId = ossProperties.getKeyId();
            //获取AccessKeySecret
        String keySecret = ossProperties.getKeySecret();
            //获取BucketName
        String bucketName = ossProperties.getBucketName();
        try {
            //创建OSSClient实例
            OSS ossClient = new OSSClientBuilder().build(endPoint, keyId,
                    keySecret);
            //组装文件地址
            String host = "https://"+bucketName+"."+endPoint+"/";
            //获取文件名称
            String objectName = url.substring(host.length());
            //删除文件
            ossClient.deleteObject(bucketName,objectName);
        } catch (Exception e) {
            e.printStackTrace();
        }
    }
}

6.视图类

package com.laoyang.controller;

import com.laoyang.service.FileService;
import com.laoyang.utils.R;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
import org.springframework.web.multipart.MultipartFile;

import javax.annotation.Resource;

/**
 * @author:Kevin
 * @create: 2022-09-07 20:07
 * @Description: 文书上传
 */
@RestController
@RequestMapping("/api/oss/file")
public class OSSController {

    @Resource
    private FileService fileService;
    /**
     * 文件上传
     * @param file
     * @param module
     * @return
     */
    @PostMapping("/upload")
    public R upload(MultipartFile file, String module){
        //返回上传到oss的路径
        String url = fileService.upload(file,module);
        return R.ok(url).message("文件上传成功");
    }
}

最后就是前端调用链接实现了，我用的是vue

        

            <!-- 用户头像 -->
            <el-form-item label="头像">
              <el-upload
                :show-file-list="false"
                :on-success="handleAvatarSuccess"
                :before-upload="beforeAvatarUpload"
                class="avatar-uploader"
                :data="uploadHeader"
                action="http://localhost:9090/api/oss/file/upload?module=avatar"
              >
                <img v-if="user.avatar" :src="user.avatar">
                <i v-else class="el-icon-plus avatar-uploader-icon"/>
              </el-upload>
            </el-form-item>

组件方法实现：

 /**
     * 上传成功回调
     * @param res
     * @param file
     */
    handleAvatarSuccess(res, file) {
      this.user.avatar = res.data
      // 强制重新渲染
      this.$forceUpdate()
    },
    /**
     * 上传校验
     * @param file
     * @returns {boolean}
     */
    beforeAvatarUpload(file) {
      const isJPG = file.type === 'image/jpeg'
      const isLt2M = file.size / 1024 / 1024 < 2
      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG 格式!')
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!')
      }
      return isJPG && isLt2M
    },

祝大家一步成功！