阿里云OSS使用

Posted 2022-02-02 捡黄金的少年

阿里云OSS购买之后

项目加入依赖

           <dependency>
                <groupId>com.aliyun.oss</groupId>
                <artifactId>aliyun-sdk-oss</artifactId>
                <version>3.10.2</version>
            </dependency>

1、为了方便配置管理，建立配置实体类封装

将@ConfigurationProperties将配置信息，封装在application.yml中

  application.yml中的配置，具体参数，参考直接的OSS配置信息

jhj:
  blog:
    aliyun:
      endpoint: https://oss-cn-beijing.aliyuncs.com
      accessKeyId: *****
      accessKeySecret: ****
      bucketName: #存储空间名称
      bucketDomain: ********

  建立实体类进行封装application.yml中的信息

@Setter
@Getter
@Component
@ConfigurationProperties(prefix = "jhj.blog")
public class BlogProperties implements Serializable 
    //会将jhj.blog.aliyun下面的属性绑定到AliyunProperties 对象属性上。
    private AliyunProperties aliyun;

 AliyunProperties 实体类

@Setter
@Getter
public class AliyunProperties implements Serializable 
    /**
     * Oss的端点信息
     */
    private  String endpoint;

    private  String accessKeyId;
    private  String accessKeySecret;
    /**
     * 存储空间名称
     */
    private  String bucketName;
    /**
     * 访问文件时候作为基础的URL
     */
    private  String bucketDomain;

2、上传目录枚举类封装

方便拿取，这样就避免手动书写文件夹时候产生错误，

由下面上传可以看到 platformEnum.name().toLowerCase()，这样就拿到小写的名称，比如ARTICLE拿到转化后的就是article了

public enum PlatformEnum 

    ARTICLE, USER;

3、上传文件

    public static Result uploadFileToOss(PlatformEnum platformEnum, MultipartFile file, AliyunProperties aliyun) 
        // 上传
        // 上传文件所在目录名，当天上传的文件放到当天日期的目录下。格式如下：article/19990101
         //platformEnum.name().toLowerCase()获取到名称转小写
        String folderName = platformEnum.name().toLowerCase() + "/" + DateFormatUtils.format(new Date(), "yyyyMMdd");

        // 保存到 OSS 中的文件名，采用 UUID 命名。
        String fileName = UUID.randomUUID().toString().replace("-", "");

        // 从原始文件名中，获取文件扩展名
        String fileExtensionName = file.getOriginalFilename().substring(file.getOriginalFilename().lastIndexOf("."));

        // 文件在 OSS 中存储的完整路径
        String filePath = folderName + "/" + fileName + fileExtensionName;

        OSS ossClient = null;
        try 
            // 获取 OSS 客户端实例
            ossClient = new OSSClientBuilder().build(aliyun.getEndpoint(), aliyun.getAccessKeyId(), aliyun.getAccessKeySecret());

            // 上传文件到OSS 并响应结果
            PutObjectResult putObjectResult = ossClient.putObject(aliyun.getBucketName(), filePath, file.getInputStream());

            ResponseMessage response = putObjectResult.getResponse();
            if (response == null) 
                // 上传成功

                // 返回上传文件的访问完整路径
                return Result.ok(aliyun.getBucketDomain() + filePath);
             else 
                // 上传失败，OOS服务端会响应状态码和错误信息
                String errorMsg = "响应的错误状态码是【" + response.getStatusCode() + "】，" +
                        "错误信息【" + response.getErrorResponseAsString() + "】";
                return Result.error(errorMsg);
            
         catch (Exception e) 
            return Result.error(e.getMessage());
         finally 
            if (ossClient != null) 
                // 关闭OSSClient。
                ossClient.shutdown();
            
        
    

4、删除文件

    /**
     * 根据文件url删除
     *
     * @param fileUrl
     */
    public static Result delete(String fileUrl, AliyunProperties aliyun) 
        // 去除文件 url 中的 Bucket域名
        String filePath = fileUrl.replace(aliyun.getBucketDomain(), "");

        OSS ossClient = null;
        try 
            ossClient = new OSSClientBuilder().build(aliyun.getEndpoint(), aliyun.getAccessKeyId(), aliyun.getAccessKeySecret());
            // 删除
            ossClient.deleteObject(aliyun.getBucketName(), filePath);
            return Result.ok();
         catch (Exception e) 
            return Result.error("删除失败：" + e.getMessage());
         finally 
            if (ossClient != null) 
                ossClient.shutdown();
            
        
    

5、接口调用

1、采用autowired将自定义配置的阿里云参数的实体类注入 BlogProperties 

2、采用@RequestParam("file")标注文件信息

3、@RequestParam和@PathVariable这两者之间区别

用@RequestParam请求接口时,URL是:http://www.test.com/user/getUserById?userId=1

用@PathVariable请求接口时,URL是:http://www.test.com/user/getUserById/2

//将配置信息注入到全局
    @Autowired
    private BlogProperties blogProperties;

    @ApiOperation("上传文件到OSS服务器")
    @PostMapping("/upload")
    public Result upLoad(@RequestParam("file") MultipartFile file) 
        //获取阿里云相关配置信息
        AliyunProperties aliyun = blogProperties.getAliyun();
        Result result = AliyunUtil.uploadFileToOss(PlatformEnum.ARTICLE, file, aliyun);
        return result;
    

    //   value = "file",required = true 表示强制传，不传报错 fileURl
    @ApiImplicitParam(name = "fileURl", value = "要删除的文件的URL", required = true)
    @ApiOperation("根据文件的URL删除再OSS上对应的文件")
    @DeleteMapping("/delete")
    public Result delete(@RequestParam(value = "fileURl", required = true) String fileURl) 
        AliyunProperties aliyun = blogProperties.getAliyun();
        Result deleteResult = AliyunUtil.delete(fileURl, aliyun);
        return deleteResult;
    

6、前端部分实现单图片上传删除图片

  <el-upload
          class="avatar-uploader"
          accept="image/*"
          action=""
          :show-file-list="false"
          :http-request="uploadMainImg"
        >
          <img
            v-if="formData.imageUrl"
            :src="formData.imageUrl"
            class="avatar"
          />
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>

 accept="image/*"接收图片方式

 :show-file-list="false" 不多文件展示

 :http-request="uploadMainImg" 单击时候直接调用方法

上传方法

    uploadMainImg(file) 
      const data = new FormData();
      data.append("file", file.file);
      commonApi
        .uploadImg(data)
        .then((response) => 
          //  以防图片多次上传，上传成功后，把原来的图片删除
          this.deleteImg();
          this.formData.imageUrl = response.data;
        )
        .catch((error) => 
          this.$message(
            type: "error",
            message: "上传失败",
          );
        );
    ,

     uploadImg(data = ) 
        return request(
            url: `/article/file/upload`,
            method: 'post',
            data // data: data 简写
        )
    ,

注意传递的是 

const data = new FormData();

 data.append("file", file.file);

而不是直接file传递

删除方法

props下面，接收原始图片的URL，进行对比，判断是否删除

    oldImageUrl: 
      // 标题
      type: String,
      default: "",
    ,

      // 如果之前图片路径不为空，则先删除之前的图片
      // 原始的图片为a，如果第二次上传为B，b不等于时候才删除以前图片，这样原始的那张图片就可以保存下来

 deleteImg() 
      // 如果之前图片不为空，则先删除之前的图片
      // 原始的图片为a，如果第二次上传为B，b不等于时候才删除以前图片，这样原始的那张图片就可以保存下来
      if (
        this.formData.imageUrl &&
        this.formData.imageUrl !== this.oldImageUrl
      ) 
        commonApi.deleteImg(this.formData.imageUrl);
      
    ,

deleteImg(imageUrl) 
        return request(
            url: `/article/file/delete`,
            method: 'delete',
            params:  'fileUrl': imageUrl 
        )