<!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的更多相关文章
	

    
								
  1. 无服务端纯前台导出数据到Excel-JSExcelXML.js 使用指南
		
    JSExcelXML 使用指南 先来个效果预览 a.前端显示 b.导出excel效果 表头部分 表尾部分 1.功能描述 JsExcelXml 采用js生成excel中可显示的xml格式文本,将输出文本 ...
    
		
    2. 
						
  2. 使用 PHP 来做 Vue.js 的 SSR 服务端渲染
		
    对于客户端应用来说,服务端渲染是一个热门话题.然而不幸的是,这并不是一件容易的事,尤其是对于不用 Node.js 环境开发的人来说. 我发布了两个库让 PHP 从服务端渲染成为可能.spatie/se ...
    
		
    3. 
						
  3. vertx 从Tcp服务端和客户端开始翻译
		
    写TCP 服务器和客户端 vert.x能够使你很容易写出非阻塞的TCP客户端和服务器 创建一个TCP服务 最简单的创建TCP服务的方法是使用默认的配置:如下 NetServer server = ve ...
    
		
    4. 
						
  4. 实现ssr服务端渲染
		
    前言 前段时间寻思做个个人网站,然后就立马行动了.  个人网站如何实现选择什么技术方案,自己可以自由决定.  刚好之前有大致想过服务端渲染,加载速度快,还有 SEO 挺适合个人网站的.  所以就自己造 ...
    
		
    5. 
						
  5. 教你如何在React及Redux项目中进行服务端渲染
		
    服务端渲染(SSR: Server Side Rendering)在React项目中有着广泛的应用场景 基于React虚拟DOM的特性,在浏览器端和服务端我们可以实现同构(可以使用同一份代码来实现多端 ...
    
		
    6. 
						
  6. c# .NET RSA结合AES加密服务端和客户端请求数据
		
    这几天空闲时间就想研究一下加密,环境是web程序,通过js请求后台返回数据,我想做的事js在发送请求前将数据加密,服务端收到后解密,待服务端处理完请求后,将处理结果加密返回给客户端,客户端在解密,于是 ...
    
		
    7. 
						
  7. next.js、nuxt.js等服务端渲染框架构建的项目部署到服务器，并用PM2守护程序
		
    前端渲染:vue.react等单页面项目应该这样子部署到服务器 貌似从前几年,前后端分离逐渐就开始流行起来,把一些渲染计算的工作抛向前端以便减轻服务端的压力,但为啥现在又开始流行在服务端渲染了呢?如v ...
    
		
    8. 
						
  8. java服务端集成极光消息推送--详细开发步骤
		
    1.极光推送账号准备 要使用极光消息推送必须先在官方网站上注册账号,并添加应用. 产品介绍:https://docs.jiguang.cn/jpush/guideline/intro/ 注册开发者账号 ...
    
		
    9. 
						
  9. GridView 服务端控件添加 js
		
    针对服务端控件的 CommandField “Delete” 添加 js $("#GridView1").find("a").each( function()  ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. 维生素C - 坏血症
			
    在地理大发现时代,许多水手在远洋航行时不幸罹患一种典型航海病,患者皮肤溃烂.牙龈出血不止,不久就会危及生命,这就是大名鼎鼎的坏血症,是一种因为缺乏维生素C而产生的的皮.粘膜下出血.齿龈肿胀.关节和肌肉 ...
    
			
    2. 
						
  2. 2016集训测试赛（二十一）Problem C: 虫子
			
    题目大意 给你一棵树, 每个点有一个点权. 有两种操作: link / cut 修改某个点的点权 每次操作后, 你要输出以下答案: 在整棵树中任意选两个点, 这两个点的LCA的期望权值. Soluti ...
    
			
    3. 
						
  3. JVM中的内存分区简介
			
    1.JVM的内存区域划分: 大多数 JVM 将内存区域划分为 Method Area(Non-Heap)(方法区) ,Heap(堆) , Program Counter Register(程序计数器) ...
    
			
    4. 
						
  4. 如何让自己的程序支持iPhone5–RetinaImages
			
    我们知道如果想让程序的启动图像能够适应iPhone5(640X1136),那么我们需要把启动的图像命名以“-568h@2x”结尾的图片,那 么是不是程序中用到的所有图片都可以用这样的方式来命名,以适合 ...
    
			
    5. 
						
  5. Android Material Design系列之主题样式介绍说明
			
    今天这篇文章应该算是Material Design系列的补充篇,因为这篇文章本来应该放到前面讲的,因为讲的是主题嘛,对于一些状态和颜色的介绍,因为我们一新建一个项目时,系统自带了三个属性的颜色,现在就 ...
    
			
    6. 
						
  6. struts_hibernate登陆范例
			
    开发工具:MyEclipse 6.0 ,Tomcat 5.5 ,JDK 1.5  ,MySQL 5.0 :开发准备:下载Struts 2.0和Hibernate 3.2,大家可Struts和Hiber ...
    
			
    7. 
						
  7. CSS 属性选择器的深入挖掘
			
    CSS 属性选择器,可以通过已经存在的属性名或属性值匹配元素. 属性选择器是在 CSS2 中引入的并且在 CSS3 中得到了很好拓展.本文将会比较全面的介绍属性选择器,尽可能的去挖掘这个选择器在不同场 ...
    
			
    8. 
						
  8. ArcGIS教程：公布地理处理服务
			
    要公布地理处理服务.您须要两个元素:结果 窗体中的结果和到 ArcGIS Server 的管理员或公布者连接. 要公布服务,请右键单击结果并选择共享为 > 地理处理服务.例如以下图所看到的.此操 ...
    
			
    9. 
						
  9. C#面试基础题1
			
    1.简述 private. protected. public. internal 修饰符的访问权限.(C++中没有internal) private : 私有成员, 在类的内部才可以访问 ,也就是类 ...
    
			
    10. 
						
  10. 自编自演的Linux脚本
			
    启动全服务脚本 #!/bin/bash cd `` BIN_DIR=`pwd` COUNT= function deal(){ # ; #/stdout.log |grep -w 'Main serv ...
    
			
    11.