使用服务端的临时密钥，不依赖阿里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() ...
随机推荐
- vue.js移动端app实战1
本系列将会用vue.js2制作一个移动端的webapp单页面,页面不多,大概在7,8个左右,不过麻雀虽小,五脏俱全,常用的效果如轮播图,下拉刷新,上拉加载,图片懒加载都会用到.css方面也会有一些描述 ...
- Ansible进阶之企业级应用
1.环境 cat /etc/hosts 127.0.0.1 localhost localhost.localdomain localhost4 localhost4.localdomain4 ::1 ...
- 轻量i3wm配置使用笔记 -- 主题切换器（j4-make-config）
快速切换主题 j4-make-config介绍: j4-make-config脚本可以方便地在几组"主题"之间切换,还可以根据当前工作的环境,轻松地从几个不同的配置部分组合一个完整 ...
- centos中httpd Server not started: (13)Permission denied: make_sock: could not bind to address [::]:8888
Install semanage tools: sudo yum -y install policycoreutils-python Allow port 88 for httpd: sudo sem ...
- 数据挖掘-MovieLens数据集_电影推荐_亲和性分析_Aprioro算法
#!/usr/bin/env python2 # -*- coding: utf-8 -*- """ Created on Tue Feb 7 14:38:33 201 ...
- 分享个免费的货币汇率API
先上API文档链接:https://www.juhe.cn/docs/api/id/23,支持人民币牌价.外汇汇率查询:数据仅供参考,交易时以银行柜台成交价为准. 人民币牌价 接口地址:http:// ...
- 日历插件js,jquery
常用的日历插件 DatePicker My97DatePicker 文章来源:刘俊涛的博客 地址:http://www.cnblogs.com/lovebing 欢迎关注,有问题一起学习欢迎留言. ...
- 【Python】删除字符串的空白
在程序中,额外的空白可能让人迷惑,对于程序员来说,'python'跟'python '看起来几乎一样,但是对于程序来说,可是千差万别 (lstrip)删除开头空白 >>> Langu ...
- HBase中Region, store, storefile和列簇的关系
转自:http://zhb-mccoy.iteye.com/blog/1543492 The HRegionServer opens the region and creates a correspo ...
- MySQL数据库 常用命令
1.MySQL常用命令 create database name;创建数据库 use databasename;选择数据库 drop database name 直接删除数据库,不提醒 show ta ...