阿里云对象存储OSS 服务端签名后直传

1,介绍

一丶第一种传输方式

前端先把图片传给我们自己的服务器,然后服务器再向对象存储的服务器传图片,这种方式不是很好,服务端内部调服务端的方式 严重影响传输效率

这篇就是以这种方式上传:https://www.cnblogs.com/mangoubiubiu/p/13773822.html

二丶服务端签名后直传

前端向我们自己的服务端请求 ,服务的构造签名后返回签名给前端,前端再次拿着签名直接请求对象存储的服务器。

官方文档:https://help.aliyun.com/document_detail/31926.html?spm=a2c4g.11186623.6.1734.3cb67403bkmqVS

 

2,步骤

一丶环境搭建:https://www.cnblogs.com/mangoubiubiu/p/14288603.html

二丶代码编写:

package com.atguigu.gulimall.thirdparty.controller;


import com.aliyun.oss.OSS;
import com.aliyun.oss.common.utils.BinaryUtil;
import com.aliyun.oss.model.MatchMode;
import com.aliyun.oss.model.PolicyConditions;
import com.atguigu.common.utils.R;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.beans.factory.annotation.Value;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.text.SimpleDateFormat;
import java.util.Date;
import java.util.LinkedHashMap;
import java.util.Map;

@RestController
@RequestMapping("third-party/oss")
public class OssController {

    @Autowired
    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;

    @RequestMapping("policy")
     public R policy(HttpServletRequest request, HttpServletResponse response){
         String host = "https://" + bucket + "." + endpoint; // host的格式为 bucketname.endpoint
         // callbackUrl为 上传回调服务器的URL,请将下面的IP和Port配置为您自己的真实信息。
       //  String callbackUrl = "http://88.88.88.88:8888";
       String formatDate=  new SimpleDateFormat("yyyy-mm-dd").format(new Date());
         String dir = formatDate+"/"; // 用户上传文件时指定的前缀。
         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);

             Map<String, String> 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));
             // respMap.put("expire", formatISO8601Date(expiration));
             return R.ok().put("data",respMap);
         } catch (Exception e) {
             // Assert.fail(e.getMessage());
             System.out.println(e.getMessage());
         } finally {
             ossClient.shutdown();
         }
        return null;
     }



}

三丶注意点:

 

 

四丶阿里云控制台开启跨域:

由于前端直接向对象存储发请求,会存在跨域问题,所以要在阿里云OSS控制台开启跨域。

控制台---》概要----》点击设置

 

 

           

点击创建规则

 

 

五丶前端实现,这里用的element UI组件

具体可看官方文档:https://element.eleme.io/#/zh-CN/component/upload

 

响应地址名是这个名

 

六丶SUCCESS

 

 

posted @ 2021-01-17 15:41  KwFruit  阅读(284)  评论(0编辑  收藏  举报