四步解决！OSS对象存储文件上传功能（服务端签名后直传，建议收藏）

Dear 丶 2022-10-05 10:51 499阅读 0赞

*开始之前先来带大家看看普通上传方式和服务端签名后直传的区别！*

![在这里插入图片描述][880eddea3b984e25aa664e4c35d31614.gif_pic_center]

**普通上传方式**

![在这里插入图片描述][20210608165713393.png]

*  普通上传方式通过InputStream作为OSS文件的数据源。用户(浏览器)把文件交给我们自已的服务器，再由服务器携带相关验证信息上传文件至阿里云，这种方式每上传一次，文件就会经过一次我们自已的服务器(占用大量带宽)，我们的服务器也会在大量的用户下带来瓶颈。影响服务器处理别的请求，大大降低了效率。

**服务端签名后直传**

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTY5MjcwNQ_size_16_color_FFFFFF_t_70]

*  服务端签名后直传是通过用户(浏览器)发起请求到我们自已的服务器中进行验证，验证通过后服务器会根据阿里云的账号密码生成一段`policy`(防伪签名) 返回给我们用户(浏览器)，policy中包含了访问阿里云的授权令牌，以及要上传给阿里云哪个地址哪个位置等相关信息， 需要注意的是这段签名中并没有账号密码，用户(浏览器)拿到签名后可以直接通过我们浏览器将文件上传至阿里云(阿里云可以验证签名是否正确)。不会对服务端产生压力，而且安全可靠。

> 服务端签名后直传原理如下：

1.  用户发送上传Policy请求到应用服务器
2.  应用服务器返回上传Policy和签名给用户
3.  用户之间上传数据到OSS

--------------------

## 阿里云官方 ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTY5MjcwNQ_size_16_color_FFFFFF_t_70 1]  
**官方地址：[阿里云帮助文档][Link 1]**

--------------------

![在这里插入图片描述][1da32363c8854816b2776cc53214d678.gif_pic_center]

*下面我们通过官方文档四步实现服务端签名后直传的代码编写。*

### 目录 ###

*   *  阿里云官方
     *   *  一. 接入OSS(导入相关依赖)
         *  二. 开通AccessKey(访问秘钥)
         *  三. 编写后端接口
         *  四.编写前端代码

--------------------

### 一. 接入OSS(导入相关依赖) ###

> **这里推荐 `Spring Cloud Alibaba-OSS` 封装好的对象存储，只需要添加一些注解和少量配置，就可以完成文件上传操作。**

*  **GitHub地址：[Aliyun Spring Boot OSS Simple][]**  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTY5MjcwNQ_size_16_color_FFFFFF_t_70 2]  
    1.**导入 starter (依赖)**

<dependency>
        <groupId>com.alibaba.cloud</groupId>
        <artifactId>aliyun-oss-spring-boot-starter</artifactId>
    </dependency>

*  导入成功之后我们进入源码发现它会自已帮我们导入原生的sdk  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTY5MjcwNQ_size_16_color_FFFFFF_t_70 3]

> **找不到相关依赖的解决方案： [完美解决导入aliyun-oss-spring-boot-starter导入依赖报错][aliyun-oss-spring-boot-starter]**

1.  **在`yml`配置文件中配置OSS服务对应的`accessKey`，`secretKey`和`endpoint`。**

alibaba:
      cloud:
        access-key: LTAI5tGDG4tqfdsfsfW2xQF             #账号 AccessKey
        secret-key: du12BXlruM8gfgfdfgpvxTekRxQSjw      #密码 secretKey
        oss:
          endpoint: oss-cn-beijing.aliyuncs.com         #给哪块进行上传 endpoint
          bucket: md-ossbucket    						#自定义属性，bucket名称

--------------------

### 二. 开通AccessKey(访问秘钥) ###

> **不会的可以参考下方教程。  
> 点击跳转：[3分钟教你开通阿里云AccessKey秘钥，并完成对应授权！][3_AccessKey]**

--------------------

### 三. 编写后端接口 ###

package com.oss.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 org.springframework.beans.factory.annotation.Autowired;
    import org.springframework.beans.factory.annotation.Value;
    import org.springframework.web.bind.annotation.CrossOrigin;
    import org.springframework.web.bind.annotation.GetMapping;
    import org.springframework.web.bind.annotation.RestController;
    
    import java.text.SimpleDateFormat;
    import java.util.Date;
    import java.util.LinkedHashMap;
    import java.util.Map;
    
    @RestController
    public class OssController {
        
    
    	@Autowired
    	OSS ossClient;
    
    	@Value("${alibaba.cloud.oss.endpoint}")
    	private String endpoint;    //从yml文件中读取
    
    	@Value("${alibaba.cloud.oss.bucket}")
    	private String bucket;      //从yml文件中读取
    
    
    	@Value("${alibaba.cloud.access-key}")
    	private String accessId;	//从yml文件中读取
    
    	@GetMapping("/oss/policy")
    	@CrossOrigin
    	public Map<String, String> policy(){
        
    
    		//https://md-ossbucket.oss-cn-beijing.aliyuncs.com/QQ%E6%88%AA%E5%9B%BE20210609114525.png  host的格式为 bucketname.endpoint
    		String host = "https://" + bucket + "." + endpoint;
    
    		String format = new SimpleDateFormat("yyyy-MM-dd").format(new Date()); //格式化一个当前的服务器时间
    
    		String dir = format+"/"; // 用户上传文件时指定的前缀,我们希望以日期作为一个目录
    
    		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));
    			// respMap.put("expire", formatISO8601Date(expiration));
    
    		} catch (Exception e) {
        
    			// Assert.fail(e.getMessage());
    			System.out.println(e.getMessage());
    		} finally {
        
    			ossClient.shutdown();
    		}
    
    		return respMap;
    	}
    }

*  **测试接口**  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTY5MjcwNQ_size_16_color_FFFFFF_t_70 4]

`以后前台想要上传文件，需要给我们后台发送这个请求，拿到签名数据，携带签名数据以及要上传的文件提交给阿里云，阿里云会进行校验以及存储相关的文件。`

--------------------

### 四.编写前端代码 ###

最后我们可以使用Vue+ElementUI(文件上传组件)来实现，这里就不进行前台的演示了。

--------------------

**谢谢观看，一键三连加关注！** ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTY5MjcwNQ_size_16_color_FFFFFF_t_70 5]

[880eddea3b984e25aa664e4c35d31614.gif_pic_center]: /images/20221005/c19107e602bc4130a04bff7fdecbe5b0.png
[20210608165713393.png]: /images/20221005/00f5bf3f6fd14457aaaada43028e9f45.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTY5MjcwNQ_size_16_color_FFFFFF_t_70]: /images/20221005/fa77e5fbfd34413ab3914c88e16ea0c1.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTY5MjcwNQ_size_16_color_FFFFFF_t_70 1]: /images/20221005/a53579324d1a4561a3016cf3a677ec40.png
[Link 1]: https://help.aliyun.com/document_detail/31926.html?spm=a2c4g.11186623.6.1738.5ccb7d9cOGmsBO
[1da32363c8854816b2776cc53214d678.gif_pic_center]: /images/20221005/ae06948be2be41c4969c8041f989dbe8.png
[Aliyun Spring Boot OSS Simple]: https://github.com/alibaba/aliyun-spring-boot/tree/master/aliyun-spring-boot-samples/aliyun-oss-spring-boot-sample
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTY5MjcwNQ_size_16_color_FFFFFF_t_70 2]: /images/20221005/3f5af5ff5f1b41e6bb04cfda020b4287.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTY5MjcwNQ_size_16_color_FFFFFF_t_70 3]: /images/20221005/3776864073094a74b5979b31c05a76aa.png
[aliyun-oss-spring-boot-starter]: https://blog.csdn.net/weixin_45692705/article/details/117739889
[3_AccessKey]: https://blog.csdn.net/weixin_45692705/article/details/117732670?spm=1001.2014.3001.5501
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTY5MjcwNQ_size_16_color_FFFFFF_t_70 4]: /images/20221005/6468ad7f36d54d979db455d8c92370d2.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTY5MjcwNQ_size_16_color_FFFFFF_t_70 5]: /images/20221005/260b7dff7b114f9b97467f486984f439.png