阿里云储存OSS（服务端签名后前端直传）

流程介绍

本示例中，Web端向服务端请求签名，然后直接上传，不会对服务端产生压力，而且安全可靠。但本示例中的服务端无法实时了解用户上传了多少文件，上传了什么文件。如果想实时了解用户上传了什么文件，可以采用服务端签名直传并设置上传回调。

落地实现

添加依赖

 <!--OSS SDK--><dependency><groupId>com.aliyun.oss</groupId><artifactId>aliyun-sdk-oss</artifactId><version>3.10.2</version></dependency>

步骤一、后端签名加密

@RestController
public class OSSController {@CrossOrigin //解决跨域@RequestMapping("/oss/policy")public Map<String,String> policy(@RequestParam("fileName") String fileName){String accessId = ""; // 请填写您的AccessKeyId。String accessKey = ""; // 请填写您的AccessKeySecret。String endpoint = "oss-cn-beijing.aliyuncs.com"; // 请填写您的 endpoint。String bucket = ""; // 请填写您的 bucketname 。String host = "https://" + bucket + "." + endpoint; // host的格式为 bucketname.endpointSimpleDateFormat simpleDateFormat = new SimpleDateFormat("yyyy-MM-dd");String date = simpleDateFormat.format(new Date());String dir = "tuling-test/"+date+"/"; // 用户上传文件时指定的前缀。//文件名生成fileName = UUID.randomUUID().toString() + fileName.substring(fileName.lastIndexOf("."));String key = dir + fileName;// 创建OSSClient实例。OSS ossClient = new OSSClientBuilder().build(endpoint, accessId, accessKey);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);//您的AccessKeyId。respMap.put("policy", encodedPolicy);//Policy规定了请求表单域的合法性。respMap.put("signature", postSignature);//根据AccessKey Secret和Policy计算的签名信息，OSS验证该签名信息从而验证该Post请求的合法性。respMap.put("dir", dir); //前缀respMap.put("host", host); // "https://" + bucketname + '.' + endpoint;  (前端请求oss服务路径)respMap.put("key", key); //dir + fileName (上传Object的名称。)respMap.put("expire", String.valueOf(expireEndTime / 1000));// respMap.put("expire", formatISO8601Date(expiration));return respMap;} catch (Exception e) {// Assert.fail(e.getMessage());System.out.println(e.getMessage());} finally {ossClient.shutdown();}return null;}
}

步骤二、配置客户端

<template><div id="upload"><el-uploadclass="upload-demo":action="objectData.host":before-upload="getPolicy":data="objectData":on-preview="handlePreview":on-remove="handleRemove":file-list="fileList"list-type="picture"><el-button size="small" type="primary">点击上传</el-button><div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div></el-upload></div></template><script>
import {request} from '../network/request'
import axios from "axios";
export default {name: "upfile",data() {return {fileList: [{name: 'food.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'}, {name: 'food2.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'}],objectData: {OSSAccessKeyId: "",policy: "",Signature: "",key: "",host: '',dir: ''}};},created() {},methods: {handleRemove(file, fileList) {console.log(file, fileList);},handlePreview(file) {console.log(file);},getPolicy(file){console.log(file)const _this = this;return new Promise(((resolve, reject) => {request({url: 'oss/policy',params: {fileName: file.name}}).then(res=>{_this.objectData.OSSAccessKeyId = res.data.accessid; // Bucket拥有者的AccessKey ID。_this.objectData.policy = res.data.policy; //Policy规定了请求表单域的合法性。_this.objectData.Signature = res.data.signature;//根据AccessKey Secret和Policy计算的签名信息，OSS验证该签名信息从而验证该Post请求的合法性。_this.objectData.dir = res.data.dir;//前缀_this.objectData.host = res.data.host;// "https://" + bucketname + '.' + endpoint;  (前端请求oss服务路径)//_this.objectData.key = res.data.dir + "${filename}";_this.objectData.key = res.data.key;//dir + fileName (上传Object的名称。)_this.fileList.push({name: res.data.key,url: res.data.host+"/"+res.data.key})resolve(true);}).catch(err=>{console.log(err);reject(false);})}))}}
}</script><style scoped>
#upload{width: 400px;
}
</style>

步骤三、修改CORS

客户端进行表单直传到OSS时，会从浏览器向OSS发送带有Origin的请求消息。OSS对带有Origin头的请求消息会进行跨域规则（CORS）的验证。因此需要为Bucket设置跨域规则以支持Post方法。

登录OSS管理控制台。
单击Bucket列表，之后单击目标Bucket名称。
单击权限管理 > 跨域设置，在跨域设置区域单击设置。
单击创建规则，配置如下图所示。

阿里云储存OSS（服务端签名后前端直传）相关推荐

分布式电商项目二十六：使用阿里云存储的服务端签名后直传（前端联调）
使用阿里云存储的服务端签名后直传(前端联调) 在前端显示上传的界面,可以根据人人fast-vue的结构,在src\components目录下添加upload文件夹,直接添加vue组件即可,总计三个组件 ...
oss服务端签名后直传分析与代码实现
文章目录 1.简介 1.1 普通上传方式 1.2 服务端签名后直传 3.服务端签名后直传文档 3.1 用户向应用服务器请求上传Policy和回调. 3.2 应用服务器返回上传Policy和签名给用户. ...
阿里云OSS 服务端签名后直传之分片上传（结合element-ui的upload组件）
分片上传(结合element-ui的upload组件实现自定义上传) async uploadFree(content){let data = await this.getOssToken(); // ...
阿里云OSS服务端签名前端JS直传（php）示例
阿里云OSS服务端签名后前端JS直传(php)示例需求:服务端上传图片太慢,需要使用前端直传的方式.但前端把阿里云的 AccessKey ID 和 AccessKey Secret 放在前端文件中会 ...
商城项目09_品牌管理菜单、快速显示开关、阿里云进行文件上传、结合Alibaba管理OSS、服务端签名后直传
文章目录 ①. 品牌管理菜单 ②. 快速显示开关 ③. 阿里云上传概述 ④. 使用代码进行文件上传 ⑤. 结合Alibaba来管理oss ⑥. gulimall-third-party微服务 ⑦. 服 ...
阿里云oss文件上传（简单上传、服务端签名后直传）
前置: 自行开通阿里oss服务: https://www.aliyun.com/product/oss?spm=a2c4g.11174283.J_8058803260.125.d9387da2TjNf ...
SpringBoot集成阿里云存储OSS服务
前言该文章会先简单的介绍一下阿里云的OSS存储,然后演示如何在SpringBoot项目中集成OSS,每一步都有记录,保证初学者也能看懂. 文章目录前言 1.阿里云存储OSS是什么? 2.Sprin ...
阿里云视频直播服务获取签名
阿里云视频直播服务获取签名,试了一万次,最后还是催工单了,好尴尬直接上代码 package com.zjy.xzlive.util;import org.apache.commons.codec.b ...
关于阿里云短信服务测试签名模版使用教程
阿里云短信服务测试签名模版使用教程安装SDK 方式一:导入Maven依赖方式二:在集成开发环境中导入JAR文件 jar包链接 aliyun-java-sdk-core.jar aliyun-jav ...
【OSS】服务端签名后直传实现阿里云存储上传文件
文章目录 1.前言 2.阿里云OSS 2.1.开通服务 2.2.创建Bucket 2.3.创建子账户 3.服务端 3.1.依赖导入 3.2.配置文件 3.3.控制器编写 3.4.接口测试 4.前端联调 ...