使用Springboot+ElementUI实现阿里OSS加密文件上传

概述：

目前很多公司采用的都是自己搭建文件服务器，这样既要购买硬件设备，还需要专门的服务器管理员，是一笔不小的开销。自己建服务器，还要收到带宽的限制，如果要到达高可用性，一台机器是不够的，这时还需要购买多台集群，造成资源的浪费。不过，目前阿里云提供了OSS存储功能，优惠、安全，是文件服务器的首选。下面就详细讲述如何实现安全的、组件化的、服务端签名后直传文件上传的方案。

如图：

一、在阿里云注册购买OSS

1、登录创建Bucket

2、创建子账号获取accessKeyId、accessKeySecret这两个参数

获取的信息如下：

{
  "region": "region",
  "bucket": "bucket",
  "AccessKey": "AccessKey",
  "accessKeySecret": "accessKeySecret",
  // 用于服务端签名后直传，设置上传回调
  "callback": "callback",
  // 用于服务端签名后直传，设置上传回调接口认证
  "x-csrf-token": "x-csrf-token"
}

二、搭建服务端

1、创建maven工程、在pom.xml引入OSS依赖

<dependencies>
        <!--公共模块-->
        <dependency>
            <groupId>com.koo</groupId>
            <artifactId>kmall-common</artifactId>
            <version>1.0.0</version>
            <exclusions>
                <exclusion>
                    <groupId>com.baomidou</groupId>
                    <artifactId>mybatis-plus-boot-starter</artifactId>
                </exclusion>
            </exclusions>
        </dependency>
        <!--web servlet-->
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web</artifactId>
        </dependency>
        <!--OSS_aliyun启动器 与springcloud alibaba一致-->
        <dependency>
            <groupId>com.alibaba.cloud</groupId>
            <artifactId>spring-cloud-starter-alicloud-oss</artifactId>
            <version>2.2.0.RELEASE</version>
        </dependency>
        <!--审计模块，监控应用的健康情况、调用信息-->
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-actuator</artifactId>
        </dependency>
        <!--属性文件编写提示工具-->
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-configuration-processor</artifactId>
            <optional>true</optional>
        </dependency>
        <!--test-->
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-test</artifactId>
            <scope>test</scope>
        </dependency>
    </dependencies>

    <dependencyManagement>
        <dependencies>
            <!--springcloud-->
            <dependency>
                <groupId>org.springframework.cloud</groupId>
                <artifactId>spring-cloud-dependencies</artifactId>
                <version>Hoxton.SR6</version>
            </dependency>
            <!--springcloud alibaba-->
            <dependency>
                <groupId>com.alibaba.cloud</groupId>
                <artifactId>spring-cloud-alibaba-dependencies</artifactId>
                <version>2.2.1.RELEASE</version>
            </dependency>
        </dependencies>
    </dependencyManagement>

2、在application.yml中配置从OSS账号

alicloud:
  access-key: LTAI52tJbfYNXqRfG3tu6ioJH2
  secret-key: lAraWT3r8E43RUBcIj7W8NFWWQhz9
  oss:
    endpoint: oss-cn-beijing.aliyuncs.com
    bucket: kmall

3、在控制层添加生成签名的方法

• 注入ossClient
• 使用@Value注解从application.yml配置中获取endpoint、bucket、accessId信息
• 根据bucket、endpoint拼接生成host

@RestController
@RequestMapping("oss")
public class OssController {

    @Autowired
    private OSS ossClient;

    @Value("${spring.cloud.alicloud.oss.endpoint}")
    private String endpoint;
    @Value("${spring.cloud.alicloud.oss.bucket}")
    private String bucket;
    @Value("${spring.cloud.alicloud.access-key}")
    private String accessId;


    /**
     * 获取对象签名
     */
    @GetMapping("/policy")
    public R policy() {
        String host = "https://" + bucket + "." + endpoint;

        // 文件在bucket存储目录，若不存在则会自动创建路径。使用日期作为目录
        String dir = new SimpleDateFormat("yyyy-MM-dd").format(new Date()) + "/";

        // 创建OSSClient实例。这里是alicloud starter自动配置，可自动注入
        //OSS ossClient = new OSSClientBuilder().build(endpoint, accessId, accessKey);

        Map<String, String> respMap = null;
        try {
            long expireTime = 30;
            long expireEndTime = System.currentTimeMillis() + expireTime * 1000;
            Date expiration = new Date(expireEndTime);//
            // PostObject请求最大可支持的文件大小为5 GB，即CONTENT_LENGTH_RANGE为5*1024*1024*1024。
            PolicyConditions policyConds = new PolicyConditions();
            policyConds.addConditionItem(PolicyConditions.COND_CONTENT_LENGTH_RANGE, 0, 1048576000);
            policyConds.addConditionItem(MatchMode.StartWith, PolicyConditions.COND_KEY, dir);

            String postPolicy = ossClient.generatePostPolicy(expiration, policyConds);
            byte[] binaryData = postPolicy.getBytes("utf-8");
            String encodedPolicy = BinaryUtil.toBase64String(binaryData);
            String postSignature = ossClient.calculatePostSignature(postPolicy);

            respMap = new LinkedHashMap<String, String>();
            respMap.put("accessid", accessId);
            respMap.put("policy", encodedPolicy);
            respMap.put("signature", postSignature);
            respMap.put("dir", dir);
            respMap.put("host", host);
            respMap.put("expire", String.valueOf(expireEndTime / 1000));

        } catch (Exception e) {
            // Assert.fail(e.getMessage());
            System.out.println(e.getMessage());
        } finally {
            ossClient.shutdown();
        }
        return R.ok().put("data", respMap);
    }

}

说明：上面方法的访问路径 /third/oss/policy

三、前端开发

1、组件结构图

2、policy.js内容

主要用来请求服务端，获取签名信息

import http from '@/utils/httpRequest.js'
export function policy() {
   return  new Promise((resolve,reject)=>{
        http({
            url: http.adornUrl("/third/oss/policy"),
            method: "get",
            params: http.adornParams({})
        }).then(({ data }) => {
            resolve(data);
        })
    });
}

3、单文件上传组件singleUpload.vue解析

• 引入el-upload组件
• 设置action为"http://kmall.oss-cn-beijing.aliyuncs.com"，这个路径可在阿里云OSS管理获取
• 绑定数据 :data=“dataObj”，从服务器获取
• 类型设置为list-type=“picture”
• fileList：存储图片回显的信息
• beforeUpload方法，在文件上传前获取签名信息
• handleUploadSuccess方法，文件上传成功后，获取图片路径信息

<template>
  <div>
    <el-upload action="http://kmall.oss-cn-beijing.aliyuncs.com" :data="dataObj" list-type="picture" :multiple="false"
      :show-file-list="showFileList" :file-list="fileList" :before-upload="beforeUpload" :on-remove="handleRemove"
      :on-success="handleUploadSuccess" :on-preview="handlePreview">
      <el-button size="small" type="primary">点击上传</el-button>
      <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过10MB</div>
    </el-upload>
    <el-dialog v-drag v-drag :visible.sync="dialogVisible">
      <img width="100%" :src="fileList[0].url" alt="">
    </el-dialog>
  </div>
</template>
<script>
  import {policy} from './policy' 
  import {getUUID} from '@/utils'  
  
  export default {
    name: 'singleUpload',
    props: {
      value: String
    },
    computed: {
      imageUrl() {
        return this.value;
      },
      imageName() {
        if (this.value != null && this.value !== '') {
          return this.value.substr(this.value.lastIndexOf("/") + 1);
        } else {
          return null;
        }
      },
      fileList() {
        return [{
          name: this.imageName,
          url: this.imageUrl
        }]
      },
      showFileList: {
        get: function() {
          return this.value !== null && this.value !== '' && this.value !== undefined;
        },
        set: function(newValue) {}
      }
    },
    data() {
      return {
        dataObj: {
          policy: '',
          signature: '',
          key: '',
          ossaccessKeyId: '',
          dir: '',
          host: '',
          // callback:'',
        },
        dialogVisible: false
      };
    },
    methods: {
      emitInput(val) {
        this.$emit('input', val)
      },
      handleRemove(file, fileList) {
        this.emitInput('');
      },
      handlePreview(file) {
        this.dialogVisible = true;
      },
      beforeUpload(file) {
        let _self = this;
        return new Promise((resolve, reject) => {
          policy().then(response => {
            console.log("响应的数据", response);
            _self.dataObj.policy = response.data.policy;
            _self.dataObj.signature = response.data.signature;
            _self.dataObj.ossaccessKeyId = response.data.accessid;
            _self.dataObj.key = response.data.dir + getUUID() + '_${filename}';
            _self.dataObj.dir = response.data.dir;
            _self.dataObj.host = response.data.host;
            console.log("响应的数据222。。。", _self.dataObj);
            resolve(true)
          }).catch(err => {
            reject(false)
          })
        })
      },
      handleUploadSuccess(res, file) {
        console.log("上传成功...")
        this.showFileList = true;
        this.fileList.pop();
        this.fileList.push({
          name: file.name,
          url: this.dataObj.host + '/' + this.dataObj.key.replace("${filename}", file.name)
        });
        this.emitInput(this.fileList[0].url);
      }
    }
  }
</script>
<style>

</style>

4、使用方法

• 在要使用的页面引入SingleUpload组件，并注册

import SingleUpload from "@/components/upload/singleUpload";
  export default {
    components: {
      SingleUpload
    },

• 在要上传的地方添加组件

<el-form-item label="品牌logo地址" prop="logo">
    <single-upload v-model="dataForm.logo"></single-upload>
  </el-form-item>

5、效果图

源码下载：
https://gitee.com/charlinchenlin/koo-erp