使用服务端的临时密钥，不依赖阿里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() ...
随机推荐
- 伪全栈工程师做的有点简陋的ui设计
站酷:http://www.zcool.com.cn/work/ZMjEwMDIxMDA=.html 这个app 叫自我时间管理 是一个 工具 管理自己开会 购物 健身 记账等 的提醒与管理,还可 ...
- Java死锁及解决
Java线程死锁如何避免这一悲剧 Java线程死锁需要如何解决,这个问题一直在我们不断的使用中需要只有不断的关键.不幸的是,使用上锁会带来其他问题.让我们来看一些常见问题以及相应的解决方法: Jav ...
- ASIHTTPRequest, request sent twice
´ve just started using ASIHTTPRequest for iOs and I have a small issue with it. All requests are sen ...
- Android属性动画：动画流控制
今天的文章里,我将会和大家讨论对动画流的控制.我们可以通过Animator系列的API来控制动画的开始.停止和取消.在 KitKat也就是API level 19中,我们还可以控制动画的暂停和恢复.在 ...
- python遍历当前目录并删除某文件
#coding: utf-8 """ this programe is to clear driverlog below this dir __author__:the_ ...
- 对数据进行GZIP压缩和解压
public class GzipUtils { /** * 对字符串进行gzip压缩 * @param data * @return * @throws IOException */ public ...
- 查看Linux上MySQL版本信息
如果MySQL是用rpm或者yum安装的,可用 #rpm -qa|grep mysql查看. 如: [root@asd76 ~]# rpm -qa|grep mysqlmysql-5.1.73-3.e ...
- java web邮件收发
1.网上方法要导入两个包 mail.jar&activation.jar package com.zjh.shopping.util; import java.util.Date; impor ...
- npm run watch-poll 监控css、js 文件更新
后台执行npm run watch-poll 你可以在执行命令的后面接一个&命令就会在后台运行了.完整命令:npm run watch-poll & 就是任务号 文章来源:刘俊涛的博客 ...
- vue 父子通信过程
1.概述 每个 Vue 实例都实现了事件接口,即: 使用 $on(eventName) 监听事件 使用 $emit(eventName, optionalPayload) 触发事件 2.示例一(未传递 ...