使用服务端的临时密钥，不依赖阿里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() ...
随机推荐
- UOJ 外星人
题目: 2044年,Picks建成了人类第一台基于量子理论的银河系信息传递机.Picks游遍了宇宙,雇用了n个外星人来帮他作为信息传递机的中转站.我们将外星人依次编号为1 到n,其中i 号外星人有ai ...
- Storyboards Tutorial 01
Storyboarding 是在ios 5时候引进入的一个非常出色的特性.节省了为app创建user interfaces的时间.
- 【java】安全加密MessageDigest的功能及用法【hash一致性算法】
链接地址:https://blog.csdn.net/ma1kong/article/details/2662997 1.查看MessageDigest源码的注释说明 2.和hash一致性算法 什么关 ...
- dede实战系统：更换成kindEditor编辑器
最近由于项目需要,在搞dedeCMS,发现dede自带的ckEditor在word粘贴这方面做得不是很好,从word上面直接ctrl+V的内容跟wrod上面的表现样式相差很大,客户很不爽(因为是编辑的 ...
- OCP学习基本知识点总结
下面是我总结的OCP教程的知识点.以备參考之用. 1, What's Oracle Server? · It's a database management system that ...
- 数据存储之Archiver、Unarchiver、偏好设置
数组的归档 对象的归档 NSData多个对象的归档 NSArray多个对象的归档 偏好设置的存储 1.NSString.NSDictionary.NSArray.NSData.NSNumber等类型的 ...
- Leet Code OJ 237. Delete Node in a Linked List [Difficulty: Easy]
题目: Write a function to delete a node (except the tail) in a singly linked list, given only access t ...
- Character set 'utf8mb4' is not a compiled character set
近期在一次MySQL数据迁移的过程中遭遇了字符集的问题,提示为"Character set 'utf8mb4' is not a compiled character set".即 ...
- 2014acm亚洲区域赛陕西赛总结
这次是第一次出来到外面比赛,一切都是非常新鲜的,带着新鲜来到了古城西安.首先感觉就是志愿者一点都不热情.一副爱理不理的,这不是有违我大西北人的热情好客么. 直接说比赛吧. 第一天热身赛,出了两道非常水 ...
- 跟我学AngularJs:Controller数据共享、继承、通信使用具体解释
林炳文Evankaka原创作品.转载请注明出处http://blog.csdn.net/evankaka 摘要:本文主讲了AngularJs中的Controller中数据共享.继承.通信的具体使用 本 ...