阿里云对象存储oss上传头像

1.1 阿里云创建oss步骤

（1）用支付宝创建阿里云账号，然后实名认证

（2）点击产品-存储-对象存储oss，开通-管理控制台-创建Bucket

（3）点击头像AccessKey管理（操作oss许可证，获取id和秘钥），选择下面的继续使用

1.2 学习路径

java的oss学习文档：

https://help.aliyun.com/document_detail/32008.htm?spm=a2c4g.11186623.2.6.6ebff2eeqXgOVG#concept-32008-zh

1.3 后端实现上传头像步骤

（1）在service模块创建service_oss模块

（2）引入依赖

<dependencies>
    <!--阿里云oss依赖-->
    <dependency>
        <groupId>com.aliyun.oss</groupId>
        <artifactId>aliyun-sdk-oss</artifactId>
    </dependency>
    <!--日期工具栏依赖-->
    <dependency>
        <groupId>joda-time</groupId>
        <artifactId>joda-time</artifactId>
    </dependency>
</dependencies>
 
<properties>
    <aliyun.oss.version>3.10.2</aliyun.oss.version>
    <aliyun-sdk-oss.version>3.10.2</aliyun-sdk-oss.version>
</properties>

（3）写配置文件 

server:
  port: 8002
 
spring:
  application:
    name: service_oss
  profiles:
    active: dev
 
#阿里云oss，不同的服务器，地址不同
aliyun:
  oss:
    file:
      endponint: oss-cn-beijing.aliyuncs.com
      keyid: LTAI5tBBthAAKt6bwJaZHY77
      keysecret: Hja7tfFVBQJ2lBEbA02bouxLVScYya
      bucketname: lab-systemkk
 

（4）创建启动类

@SpringBootApplication
@ComponentScan(basePackages = {"com.zyk"})
public class OssApplication {
    public static void main(String[] args) {
        SpringApplication.run(OssApplication.class, args);
    }
}

但是运行的时候我们会发现报下面这个错误： 

Description:
 
Failed to configure a DataSource: 'url' attribute is not specified and no embedded datasource could be configured.
 
Reason: Failed to determine a suitable driver class

报错原因：

       这是因为启动时候，springboot会自动找数据库配置，但是现在我们这个模块操作数据库，只需要做到上传到oss功能，所以没有配置数据库

解决方法：

      （1）添加数据库配置（不适合我们这个模块）

      （2）在启动类添加注解，默认不去加载数据库配置文件

@SpringBootApplication(exclude = DataSourceAutoConfiguration.class)

（5）写工具类读取配置文件信息

@Component
@ConfigurationProperties(prefix = "aliyun.oss.file")
public class ConstantPropertiesUtils implements InitializingBean {
    
    /**
     * 读取配置文件
     */
    private String endponint;
    private String keyid;
    private String keysecret;
    private String bucketname;
 
    //定义公开静态属性
    public static String END_POINT;
    public static String KEY_ID;
    public static String KEY_SECRET;
    public static String BUCKET_NAME;
 
    //当spring把这些值都加载之后，这个方法才会执行
    @Override
    public void afterPropertiesSet() throws Exception {
        END_POINT=endponint;
        KEY_ID=keyid;
        KEY_SECRET=keysecret;
        BUCKET_NAME=bucketname;
    }
}

（6）在controller得到上传文件并调用service的方法

@RestController
@RequestMapping("/labOss/fileOss")
@CrossOrigin
public class ossController {
 
    @Autowired
    private ossService ossService;
 
    /**
     *上传头像的方法
     * @param file
     * @return 返回上传到oss的路径
     */
    @PostMapping
    public R uploadOssFile(MultipartFile file){
        //通过MultipartFile获取上传文件
        String url = ossService.uploadFileAvatar(file);
        return R.ok().data("url",url);
    }
}

（7）在service里面实现这个上传的过程 。这里有两个注意点：

• 多次上传相同的文件，会造成最后一次上传的文件把之前的文件覆盖了。（解决方法：添加唯一的uuid区别名称）
• 把所有文件都放到根目录会很乱（解决方法：把文件进行分类管理（这里通过日期进行分类））

@Service
public class ossServiceImpl implements ossService {
 
    @Override
    public String uploadFileAvatar(MultipartFile file) {
 
        String endpoint = ConstantPropertiesUtils.END_POINT;
        // 阿里云账号AccessKey拥有所有API的访问权限，风险很高。强烈建议您创建并使用RAM用户进行API访问或日常运维，请登录RAM控制台创建RAM用户。
        String accessKeyId = ConstantPropertiesUtils.KEY_ID;
        String accessKeySecret = ConstantPropertiesUtils.KEY_SECRET;
        String bucketName = ConstantPropertiesUtils.BUCKET_NAME;
        try {
            // 创建OSSClient实例。
            OSS ossClient = new OSSClientBuilder().build(endpoint, accessKeyId, accessKeySecret);
            //获取文件名称
            String filename = file.getOriginalFilename();
            //（1）在文件名称里面添加随机唯一的值，防止名称相同上传文件覆盖
            String uuid= UUID.randomUUID().toString().replaceAll("-", "");
            filename=uuid+filename;
            //（2）把文件按照日期进行分类，可以用导入的joda-time里面的方法获取
            String datePath=new DateTime().toString("yyyy/MM/dd");
            filename=datePath+"/"+filename;
            // 获取上传文件输入流
            InputStream inputStream =  file.getInputStream();
            // 填写Bucket名称和Object完整路径。Object完整路径中不能包含Bucket名称。
            ossClient.putObject(bucketName, filename, inputStream);
            // 关闭OSSClient。
            ossClient.shutdown();
            //把上传之后文件路径返回
            //需要把上传到阿里云oss的路径手动拼接出来
            String url="https://"+bucketName+"."+endpoint+"/"+filename;
            return url;
        } catch (IOException e) {
            e.printStackTrace();
            return null;
        }
    }
}

注意：如果出现new OSSClientBuilder()报红，那么就是因为版本号的问题，去官网找最新的版本依赖导入即可

1.4 前端添加组件实现上传头像

（1）在save.vue<template>里面添加一下代码

<!-- 讲师头像：TODO -->
<el-form-item label="讲师头像">
  <!-- 头衔缩略图 -->
  <pan-thumb :image="labStaff.avatar"/>
  <!-- 文件上传按钮 -->
  <el-button type="primary" icon="el-icon-upload" @click="imagecropperShow=true">更换头像
  </el-button>
  <!--
    v-show：是否显示上传组件
    :key：类似于id，如果一个页面多个图片上传控件，可以做区分
    :url：后台上传的url地址
    @close：关闭上传组件
    @crop-upload-success：上传成功后的回调
    <input type="file" name="file"/>
  -->
  <image-cropper
    v-show="imagecropperShow"
    :width="300"
    :height="300"
    :key="imagecropperKey"
    :url="BASE_API+'/labOss/fileOss'"
    field="file"
    @close="close"
    @crop-upload-success="cropSuccess"/>
</el-form-item>

（2）下载集成方案的模板，然后导入components的ImageCropper和PanThumb包

（3）在save.vue引入这两个包

import ImageCropper from '@/components/ImageCropper'
import PanThumb from '@/components/PanThumb'

（4）在export default声明组件

//声明组件
components: { ImageCropper, PanThumb },

（5）<image-cropper>修改上传接口url地址为后端oss的地址

:url="BASE_API+'/labOss/fileOss'"

（6）编写close方法和上传成功方法

close() { //关闭上传弹框的方法
  this.imagecropperShow = false
  //上传组件唯一标识初始化
  this.imagecropperKey=this.imagecropperKey+1
},
//上传成功方法
cropSuccess(data) {
  this.imagecropperShow = false
  //上传之后接口返回地址，把这个地址赋值给avatar即可
  this.labStaff.avatar=data.url
  //上传组件唯一标识初始化
  this.imagecropperKey=this.imagecropperKey+1
},

注意：这里的上传组件唯一标识初始化语句一定要加上，不然更改一次头像之后，无法再次更改头像！！因为唯一标识没改，再次点击显示的还是上一次添加的投票