springboot+vue实现上传头像文件到阿里云对象存储oss

1. 在阿里云oss上创建一个bucket，获取四个信息：
   
2. 编写工具类，提供对外调用四个信息的方法：

//当项目一启动，就执行接口的方法，读取配置文件内容
@Component
public class ConstantPropertiesUtils implements InitializingBean {
    //读取配置文件内容
    @Value("${aliyun.oss.file.endpoint}")
    private String endpoint;

    @Value("${aliyun.oss.file.keyid}")
    private String keyid;

    @Value("${aliyun.oss.file.keysecret}")
    private String keysecret;

    @Value("${aliyun.oss.file.bucketname}")
    private String bucketname;

    public static String END_POINT;
    public static String KEY_ID;
    public static String KEY_SECRET;
    public static String BUCKET_NAME;

    //给外界提供公用方法调用变量，防止外界修改变量
    @Override
    public void afterPropertiesSet() throws Exception {
        END_POINT = endpoint;
        KEY_ID = keyid;
        KEY_SECRET = keysecret;
        BUCKET_NAME = bucketname;
    }
}

3. 实现serviceImpl：

@Service
public class OssServiceImpl implements OssService {
    @Override
    public String uploadAvatar(MultipartFile file) {

        //工具类获取值
        String endpoint = ConstantPropertiesUtils.END_POINT;
        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);

            // 获取上传文件输入流。
            InputStream inputStream = file.getInputStream();
            //使用随机唯一参数,将 - 去除
            String uuid = UUID.randomUUID().toString().replaceAll("-", "");
            //调用oss方法实现上传
            /*
             * 第一个参数：bucket名称
             * 第二个参数：上传到oss的文件路径或名称，可以使用file.getOriginalFilename()获取
             * 第三个参数：上传文件输入流
             * */
            String fileName = file.getOriginalFilename();
            fileName = uuid + fileName;
            //将上传的文件按照日期进行分类
            String dateTime = new DateTime().toString("yyyy/MM/dd");
            //拼接；2020/12/09/121231hu1231kk213killer.jpg
            fileName = dateTime + "/" + fileName;
            ossClient.putObject(bucketName, fileName, inputStream);

            // 关闭OSSClient。
            ossClient.shutdown();

            //吧上传到oss文件路径手动拼接出来，进行返回
            //https://zf-2020.oss-cn-beijing.aliyuncs.com/kill.jpg
            String url = "https://" + bucketName + "." + endpoint + "/" + fileName;

            return url;

        } catch (IOException e) {
            e.printStackTrace();
            return null;
        }
    }
}

4. 前端使用vue的头像上传组件：

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

   //关闭上传头像弹窗
    closeImage() {
      this.imagecropperShow = false
    },
    //上传头像成功执行
    cropSuccess(data) {
      //关弹窗
      this.imagecropperShow = false
      //获取地址返回给前端
      this.teacherVo.avatar = data.url
    }