阿里云OSS对象存储

一、前言

阿里云对象存储OSS作用：用于存储图片、视屏、文件等数据。
参考阿里云文档地址：阿里云对象存储教程

二、总体思路

在这里插入图片描述
说明：客户端给服务端发送请求，获取policy和signature等数据（服务端提供），客户端携带这些数据和文件、图片、视屏等上传到阿里云对象存储空间。

三、后端实现

可参考阿里云对象存储教程中“服务端签名直传并设置上传回调”中的“应用服务器核心代码解析”代码块。
后端需要的工作：将policy和signature等数据传给前端。
实操代码如下：

@RestController
public class OssController {

    @RequestMapping("/oss/policy")
    protected R doGet(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException, ClientException {

        // 从环境变量中获取访问凭证。运行本代码示例之前，请确保已设置环境变量OSS_ACCESS_KEY_ID和OSS_ACCESS_KEY_SECRET。
        EnvironmentVariableCredentialsProvider credentialsProvider = CredentialsProviderFactory.newEnvironmentVariableCredentialsProvider();
        // Endpoint以华东1（杭州）为例，其他Region请按实际情况填写。
        String endpoint = "XXXX.aliyuncs.com";
        // 填写Bucket名称，例如examplebucket。
        String bucket = "XXXXX";
        // 填写Host名称，格式为https://bucketname.endpoint。
        String host = "https://bucketname.endpoint";
        // 设置上传回调URL，即回调服务器地址，用于处理应用服务器与OSS之间的通信。OSS会在文件上传完成后，把文件上传信息通过此回调URL发送给应用服务器。
//        String callbackUrl = "https://192.168.0.0:8888";
        // 设置上传到OSS文件的前缀，可置空此项。置空后，文件将上传至Bucket的根目录下。
        String format = new SimpleDateFormat("yyyy-MM-dd").format(new Date());
        String dir = format + "/";

        // 创建OSSClient实例。
        OSS ossClient = new OSSClientBuilder().build(endpoint, credentialsProvider);

        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 accessId = credentialsProvider.getCredentials().getAccessKeyId();
            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(respMap);
    }
}

最终返回给前端的数据为：

{
  "accessid":"LTAI5tBDFVar1hoq****",
  "host":"https://post-test.oss-cn-hangzhou.aliyuncs.com",
  "policy":"eyJleHBpcmF0aW9uIjoiMjAxNS0xMS0wNVQyMDoyMzoyM1oiLCJjxb25kaXRpb25zIjpbWyJjcb250ZW50LWxlbmd0aC1yYW5nZSIsMCwxMDQ4NTc2MDAwXSxbInN0YXJ0cy13aXRoIiwiJGtleSIsInVzZXItZGlyXC8i****",
  "signature":"VsxOcOudx******z93CLaXPz+4s=",
  "expire":1446727949,
  "dir":"user-dirs/"
}

四、前端实现

使用"el-upload"组件即可。

<el-upload
      action="https://bucketname.endpoint"
      :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>

调用后端写的上述API接口获取policy和signature等数据。

:before-upload=“beforeUpload”------在上传之前获取后端的签名等数据

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("相应数据：",_self.dataObj);
            resolve(true)
          }).catch(err => {
            reject(false)
          })
        })
      }