使用服务端的临时密钥,不依赖阿里js的putFIle--》阿里oss
<!DOCTYPE html>
<html lang='en'> <head>
<meta charset='UTF-8'>
<title>Title</title>
</head> <body>
<input type='file' id='fileInput' onchange='uploadFile()'> 请点击上传文件
</body> </html>
<script type="text/javascript" src="./crypto-js/crypto-js.js"></script> <script>
const sleep = function (ms) {
return new Promise(function (resolve, reject) {
setTimeout(function () {
resolve()
}, ms)
})
}
const waitServerDeal = async function (ms) {
console.log('start-Req')
// 请求服务器获取tts相关字段
// 可通过CROS对前后端进行配置,解决跨域问题
const ourSTSurl = 'http://genSecurityTokenServiceByGoEcho.com:1324/aliSTS/33333'
const xhr = new XMLHttpRequest()
const verb = 'GET'
xhr.open(verb, ourSTSurl)
xhr.setRequestHeader('Access-Control-Allow-Origin', '*')
xhr.send()
// 等待响应耗时
await sleep(ms)
console.log('end-start-parsResp')
const resp = JSON.parse(xhr.response)
console.log(resp)
// 讨论接口返回值
if ('AccessKeyId' in resp) {
const AccessKeyId = resp.AccessKeyId
const AccessKeySecret = resp.AccessKeySecret
const Expiration = resp.Expiration
const SecurityToken = resp.SecurityToken // 上传
const file = fileInput.files[0]
const aliHost = 'bizBucket.oss-cn-hangzhou.aliyuncs.com'
const VERB = 'PUT'
const dGMT = new Date().toUTCString()
const ContentType = file.type
const ContentMD5 = ''
const CanonicalizedOSSHeaders = 'x-oss-content-length:' + file.size + '\nx-oss-date:' + dGMT +
'\nx-oss-host:' + aliHost + '\nx-oss-security-token:' + SecurityToken
const ossBucketName = 'bizBucket' if (file.name.endsWith(".mp4")) {
ossBizConfigRes = '/uploads/video/26/'
} else {
ossBizConfigRes = '/uploads/imgs/26/'
}
const ossKey = ossBizConfigRes + file.name
const CanonicalizedResource = '/' + ossBucketName + ossKey
console.log(CanonicalizedResource)
const message = VERB + '\n' + ContentMD5 + '\n' + ContentType + '\n' + dGMT + '\n' +
CanonicalizedOSSHeaders + '\n' + CanonicalizedResource
console.log(message) // 简单的REST接口,在任何时间、任何地点、任何互联网设备上进行上传和下载数据 // 公共HTTP头定义_API 参考_对象存储 OSS-阿里云 https://help.aliyun.com/document_detail/31955.html
// PutObject_关于Object操作_API 参考_对象存储 OSS-阿里云 https://help.aliyun.com/document_detail/31978.html
// 在Header中包含签名_访问控制_API 参考_对象存储 OSS-阿里云 https://help.aliyun.com/document_detail/31951.html // 加密方法
// crypto-js - npm https://www.npmjs.com/package/crypto-js const hash = CryptoJS.HmacSHA1(message, AccessKeySecret);
const base64 = CryptoJS.enc.Base64.stringify(hash);
// CryptoJS.enc.Base64.stringify(hash) === hash.toString(CryptoJS.enc.Base64)
const Authorization = 'OSS ' + AccessKeyId + ':' + base64
console.log(Authorization)
const myReq = new XMLHttpRequest()
// 结合file.type、上传者身份、存储逻辑设置oss文件key
const reqUrl = 'https://' + aliHost + ossKey
myReq.open('PUT', reqUrl)
myReq.setRequestHeader('Authorization', Authorization)
myReq.setRequestHeader('x-oss-host', aliHost)
myReq.setRequestHeader('x-oss-content-length', file.size)
myReq.setRequestHeader('Content-Type', file.type)
myReq.setRequestHeader('x-oss-date', dGMT)
myReq.setRequestHeader('x-oss-security-token', SecurityToken)
myReq.send(file)
console.log(myReq)
// calllback
}
} // 监听文件提交
const uploadFile = () => {
console.log(33)
const fileInput = document.getElementById('fileInput')
// 判断待文件是否存在
if (fileInput.files.length > 0) {
waitServerDeal(5000)
}
}
</script>
package main import (
"./myKey"
"fmt"
"os" "github.com/aliyun/aliyun-sts-go-sdk/sts"
"github.com/labstack/echo"
"github.com/labstack/echo/middleware"
"net/http"
) func handleError(err error) {
fmt.Println(err)
os.Exit(-1)
} const (
accessKeyID = myKey.AccessKeyID
accessKeySecret = myKey.AccessKeySecret
roleArn = myKey.RoleArn
sessionName = myKey.SessionName
) type ExceptionResp struct {
Status string
Message string
} func main() {
e := echo.New()
e.Use(middleware.CORSWithConfig(middleware.CORSConfig{
// AllowOrigins: []string{"https://labstack.com", "https://labstack.net"},
AllowOrigins: []string{"*"},
// AllowHeaders: []string{echo.HeaderOrigin, echo.HeaderContentType, echo.HeaderAccept},
AllowHeaders: []string{"*"},
}))
e.GET("/aliSTS/:uid", func(c echo.Context) error {
uid := c.Param("uid")
fmt.Println("LOG ", uid)
stsClient := sts.NewClient(accessKeyID, accessKeySecret, roleArn, sessionName)
resp, err := stsClient.AssumeRole(3600)
if err != nil {
handleError(err)
r := &ExceptionResp{
Status: "-1",
Message: "what?",
}
return c.JSON(http.StatusOK, r)
}
r := resp.Credentials
return c.JSON(http.StatusOK, r)
})
e.Logger.Fatal(e.Start(":1324"))
}
使用服务端的临时密钥,不依赖阿里js的putFIle--》阿里oss的更多相关文章
- 无服务端纯前台导出数据到Excel-JSExcelXML.js 使用指南
JSExcelXML 使用指南 先来个效果预览 a.前端显示 b.导出excel效果 表头部分 表尾部分 1.功能描述 JsExcelXml 采用js生成excel中可显示的xml格式文本,将输出文本 ...
- 使用 PHP 来做 Vue.js 的 SSR 服务端渲染
对于客户端应用来说,服务端渲染是一个热门话题.然而不幸的是,这并不是一件容易的事,尤其是对于不用 Node.js 环境开发的人来说. 我发布了两个库让 PHP 从服务端渲染成为可能.spatie/se ...
- vertx 从Tcp服务端和客户端开始翻译
写TCP 服务器和客户端 vert.x能够使你很容易写出非阻塞的TCP客户端和服务器 创建一个TCP服务 最简单的创建TCP服务的方法是使用默认的配置:如下 NetServer server = ve ...
- 实现ssr服务端渲染
前言 前段时间寻思做个个人网站,然后就立马行动了. 个人网站如何实现选择什么技术方案,自己可以自由决定. 刚好之前有大致想过服务端渲染,加载速度快,还有 SEO 挺适合个人网站的. 所以就自己造 ...
- 教你如何在React及Redux项目中进行服务端渲染
服务端渲染(SSR: Server Side Rendering)在React项目中有着广泛的应用场景 基于React虚拟DOM的特性,在浏览器端和服务端我们可以实现同构(可以使用同一份代码来实现多端 ...
- c# .NET RSA结合AES加密服务端和客户端请求数据
这几天空闲时间就想研究一下加密,环境是web程序,通过js请求后台返回数据,我想做的事js在发送请求前将数据加密,服务端收到后解密,待服务端处理完请求后,将处理结果加密返回给客户端,客户端在解密,于是 ...
- next.js、nuxt.js等服务端渲染框架构建的项目部署到服务器,并用PM2守护程序
前端渲染:vue.react等单页面项目应该这样子部署到服务器 貌似从前几年,前后端分离逐渐就开始流行起来,把一些渲染计算的工作抛向前端以便减轻服务端的压力,但为啥现在又开始流行在服务端渲染了呢?如v ...
- java服务端集成极光消息推送--详细开发步骤
1.极光推送账号准备 要使用极光消息推送必须先在官方网站上注册账号,并添加应用. 产品介绍:https://docs.jiguang.cn/jpush/guideline/intro/ 注册开发者账号 ...
- GridView 服务端控件添加 js
针对服务端控件的 CommandField “Delete” 添加 js $("#GridView1").find("a").each( function() ...
随机推荐
- Geoserver跨域问题
1 Geoserver位war包,使用Tomcat发布的情况 由于geoserver为war形式,需要解决tomcat跨域问题,geoserver版本为2.9.1. (1)下载跨域war包 下载cor ...
- git——简易指南
Git对于我来说,只知道是一个版本控制器,类似于乌龟的svn.其中也仅仅会几个常的命令,比如说“更新git pull”.“提交git push”等等,因为记得当初使用的时候,师傅告诉我,对于你不懂这个 ...
- java.io.IOException: Cannot run program "java" (in directory "/data01/var/lib/jenkins/workspace/2540cb62a866eda983ab8cba34fcd4f9"): error=2, No such file or directory
通过下图所示方式,可以在同一台机器上启动多个jenkins slave 执行项目的时候报错: 解决办法:首先排查,目标文件或者目录是否存在,如果存在,则在目录机器添加/usr/bin/java的软链接 ...
- Windows下批处理命令启动项目bat脚本
文件env.cfg #server name SERVER_NAME=ActivitiService #JDK Home JDK_HOME= #Main MAIN_CLASS=com.nbtv.com ...
- Hibernate get load的区别
这两个函数都是用来从数据库中加载对象,其区别说起来主要有以下两点: 1.如果数据库中不存在该对象,那么load是抛出一个ObjectNotFound的异常,而get是返回一个空指针 2.加载机制不同 ...
- selenium用java找到表格某一行某一列中含有特定文字的某个元素
html部分代码如下: <tbody> <tr class="odd"> <td>1609</td> <td>-YOUK ...
- js 模拟发短信
<!doctype html> <html> <head> <meta charset="utf-8"> <title> ...
- UNP学习笔记(第二章:传输层)
本章的焦点是传输层,包括TCP.UDP和SCTP. 绝大多数客户/服务器网络应用使用TCP或UDP.SCTP是一个较新的协议. UDP是一个简单的.不可靠的数据报协议.而TCP是一个复杂.可靠的字节流 ...
- c# 推荐5款超实用的.NET性能分析工具
虽然.NET框架号称永远不会发生内存泄漏,原因是引入了内存回收机制.但在实际应用中,往往我们分配了对象但没有释放指向该对象的引用,导致对象永远无法释放.最常见的情况就是给对象添加了事件处理函数,但当不 ...
- SAS学习经验总结分享:篇一—数据的读取
第一篇:BASE SAS分为数据步的作用及生成数据集的方式 我是学经济相关专业毕业的,从事数据分析工作近一年,之前一直在用EXCEL,自认为EXCEL掌握的还不错. 今年5月份听说了SAS,便开始学习 ...