使用对象存储OSS上传头像

对象存储OSS

当开发项目时要用到文件上传,头像上传…因此要做文件服务,阿里云OSS是一个很好的分布式文件服务系统。

阿里云对象存储OSS（Object Storage Service）是阿里云提供的海量、安全、低成本、高持久的云存储服务。

开通对象存储OSS服务

• 申请阿里云账号
• 进行实名认证
• 开通对象存储服务
• 进入管理控制台
• 创建bucket

SpringBoot集成OSS

1.在pom文件引入依赖

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

2.封装controller层

@PostMapping("fileUpload")
public Result uploadFile(MultipartFile file){
    String url =  uploadService.uploadFile(file);
    return Result.ok(url);
}

3.封装serveice层

 public String uploadFile(MultipartFile file) {
        try {
            // Endpoint以华东1（杭州）为例，其它Region请按实际情况填写。
            String endpoint ="oss-cn-beijing.aliyuncs.com";
            // 阿里云账号AccessKey拥有所有API的访问权限，风险很高。强烈建议您创建并使用RAM用户进行API访问或日常运维，请登录RAM控制台创建RAM用户。
            String accessKeyId = "";
            String accessKeySecret = "";
            // 填写Bucket名称，例如examplebucket。
            String bucketName ="yygh-lsy";
            // 创建OSSClient实例。
            OSS ossClient = new OSSClientBuilder().build(endpoint, accessKeyId, accessKeySecret);
            //上传文件流
            InputStream inputStream = file.getInputStream();
            String fileName = file.getOriginalFilename();
            //生成一个随机值 使用uuid,添加到文件名称中
            String uuid = UUID.randomUUID().toString().replaceAll("-","");
            fileName = uuid+"."+ StringUtil.subFileType(fileName);
            //按照当前日期创建文件夹
            String timeUrl = new DateTime().toString("yyyy-MM-dd");
            fileName=timeUrl+"/"+fileName;
            ossClient.putObject(bucketName, fileName, inputStream);
            //关闭OSSClient
            ossClient.shutdown();
            //上传之后文件路径
            // https://yygh-lsy.oss-cn-beijing.aliyuncs.com/3.jpg
            String url = "http://"+bucketName+"."+endpoint+"/"+fileName;
            return url;
        } catch (IOException e) {
            e.printStackTrace();
            return null;
        }
    }

整合前端进行测试

<el-form-item prop="fileName" label="上传头像：">
		  <div class="upload-wrapper">
		    <div class="avatar-uploader">
		      <el-upload
		        class="avatar-uploader"
		        :action="fileUrl"
		        :show-file-list="false"
		        :on-success="onUploadSuccess">
		        <div class="upload-inner-wrapper">
		          <img v-if="registerFrom.fileName" :src="registerFrom.fileName" class="avatar">
		          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
		          <div v-if="!registerFrom.fileName" class="text"> 上传头像</div>
		        </div>
		      </el-upload>
		    </div>
		  </div>
</el-form-item>
onUploadSuccess(response, file) {
		     if(response.code !== 200) {
		       this.$message.error("上传失败")
		       return
		     }
		     // 填充上传文件列表
		     this.registerFrom.fileName = file.response.data
}

测试成功