阿里云OSS使用-Toy模板网

这篇具有很好参考价值的文章主要介绍了阿里云OSS使用。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

阿里云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不等于时候才删除以前图片，这样原始的那张图片就可以保存下来文章来源地址https://www.toymoban.com/news/detail-431025.html

 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 }
        })
}

到了这里，关于阿里云OSS使用的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！