前端js传文件到Azure storage

2021-01-05 17:00:16

1.首先azure管理平台方面的操作

创建 storage account    settings菜单选项又CORS，一定要设置* * * * 各种*  Settings中又Access keys 两个 后面会用到，随便一个就好

创建Containers   


2.前端js编写    下面是azue给提供的代码，

1
文件名字.jpg

这个地方需要特别注意，一定要加上，不然咋的你也上传不成功，肯爹啊

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
import {    
BlockBlobClient,    
AnonymousCredential,    
BaseRequestPolicy,    
newPipeline    
} from "@azure/storage-blob";    
class SasStore {    
constructor() {    
this.sasCache = {};    
}    
// Get a valid SAS for blob    
async getValidSASForBlob(blobURL) {    
if (this.sasCache[blobURL] && this.isSasStillValidInNext2Mins(this.sasCache[blobURL])) {    
return this.sasCache[blobURL];    
} else {    
return (this.sasCache[blobURL] = await this.getNewSasForBlob(blobURL));    
}    
}    
// Return true if "se" section in SAS is still valid in next 2 mins    
isSasStillValidInNext2Mins(sas) {    
const expiryStringInSas = new URL(`http://hostname${sas}`).searchParams.get("se");    
return new Date(expiryStringInSas) - new Date() >= 2 * 60 * 1000;    
}    
// Get a new SAS for blob, we assume a SAS starts with a "?"    
async getNewSasForBlob(blobURL) {    
// TODO: You need to implement this    
return "?newSAS";    
}    
}    
class SasUpdatePolicyFactory {    
constructor(sasStore) {    
this.sasStore = sasStore;    
}    
create(nextPolicy, options) {    
return new SasUpdatePolicy(nextPolicy, options, this.sasStore);    
}    
}    
class SasUpdatePolicy extends BaseRequestPolicy {    
constructor(nextPolicy, options, sasStore) {    
super(nextPolicy, options);    
this.sasStore = sasStore;    
}    
async sendRequest(request) {    
const urlObj = new URL(request.url);    
const sas = await this.sasStore.getValidSASForBlob(`${urlObj.origin}${urlObj.pathname}`);    
new URL(`http://hostname${sas}`).searchParams.forEach((value, key) => {    
urlObj.searchParams.set(key, value);    
});    
// Update request URL with latest SAS    
request.url = urlObj.toString();    
return this._nextPolicy.sendRequest(request);    
}    
}    
async function upload() {    
const sasStore = new SasStore();    
const pipeline = newPipeline(new AnonymousCredential());    
// Inject SAS update policy factory into current pipeline    
pipeline.factories.unshift(new SasUpdatePolicyFactory(sasStore));    
const url = "https://你的容器名称.blob.core.chinacloudapi.cn/mycontainer/myblob/文件名字.jpg";    
const blockBlobClient = new BlockBlobClient(    
`${url}${await sasStore.getValidSASForBlob(url)}`, // A SAS should start with "?"    
pipeline    
);    
const file = document.getElementById("file").files[0];    
await blockBlobClient.uploadBrowserData(file, {    
maxSingleShotSize: 4 * 1024 * 1024    
});    
}

上面 返回 '

1
?newSAS

'''

这个地方需要我们在服务端来实现，这是最坑爹的地方，文档不好看呀，害得我整了好久

代码又两种写法 下面

第一种权限直接定位在了文件 

blobName

所以这个必须传这个名字的文件


第二种权限定位在了容器

containerName

可以像容器中传递任何名字的文件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
var storage = require("@azure/storage-blob")
const accountname ="ch***ads";
const key = "wU0XJi4vrpHtbAcF****UngatZbtq1Ht/RKwo3eA62JbgodR95y1KPYPorRTDAng==";
const cerds = new storage.StorageSharedKeyCredential(accountname,key);
const blobServiceClient = new storage.BlobServiceClient(`https://${accountname}.blob.core.chinacloudapi.cn`,cerds);
const containerName="chat***ner";
const client =blobServiceClient.getContainerClient(containerName)
const blobName="a1.png";
const blobClient = client.getBlobClient(blobName);
let date = new Date();
/*
date.setHours(date.getHours() + 8);
*/
const blobSAS = storage.generateBlobSASQueryParameters({
    containerName,
    blobName,
    permissions: storage.BlobSASPermissions.parse("racwd"),
    startsOn: date,
    expiresOn: new Date(date.valueOf() + 86400)
  },
  cerds
).toString();
 
const sasUrl= blobClient.url+"?"+blobSAS;
console.log(sasUrl);
console.log(blobSAS);


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
var storage = require("@azure/storage-blob")
const accountname ="ch***ads";
const key = "wU0XJi4vrpHtbAcF****UngatZbtq1Ht/RKwo3eA62JbgodR95y1KPYPorRTDAng==";
const cerds = new storage.StorageSharedKeyCredential(accountname,key);
const blobServiceClient = new storage.BlobServiceClient(`https://${accountname}.blob.core.chinacloudapi.cn`,cerds);
const containerName="cha****ner";
const client =blobServiceClient.getContainerClient(containerName)
const blobName="a1.png";
const blobClient = client.getBlobClient(blobName);
let date = new Date();
/*
date.setHours(date.getHours() + 8);
*/
const blobSAS = storage.generateBlobSASQueryParameters({
    containerName,
    permissions: storage.ContainerSASPermissions.parse("racwd"),
    startsOn: date,
    expiresOn: new Date(date.valueOf() + 86400)
  },
  cerds
).toString();
 
const sasUrl= blobClient.url+"?"+blobSAS;
console.log(sasUrl);
console.log(blobSAS);



这样就完成了，真是费劲。



参考其他文档


这是生成sas的文档  @azure/storage-blob package   创建服务 SAS    Create an account SAS


这是网友的回答可做其他参考  如何使用node.js在Azure文件存储中上传文件？


这是上传大文件的方法 Javascript 上传文件到Azure存储  使用 Javascript 实现跨域上传文件到存储  我没有试过，有需要再看吧


直传文件到Azure Storage的Blob服务中

  • 精彩推荐

  • 2020-12-15 20:06:43

    更多WebTorrent例子

    WebTorrent是第一个运行在浏览器的Torrent客户端。是的，没错。就是浏览器! 它完全是用JavaScript编写的，并使用WebRTC实现了真正的点对点传输。不需要浏览器插件、扩展或安装。 使用开放的Web标准，WebTorrent将网站用户连接在一起，形成一个分布式的、分散的Browser-to-browser网络，以实现高效的文件传输。

  • 2020-12-16 06:43:06

    WebRTC 实现Android点到点互连（含Demo）

    WebRTC被誉为是web长期开源开发的一个新启元，是近年来web开发的最重要创新。WebRTC允许Web开发者在其web应用中添加视频聊天或者点对点数据传输，不需要复杂的代码或者昂贵的配置。目前支持Chrome、Firefox和Opera，后续会支持更多的浏览器，它有能力达到数十亿的设备。

  • 2020-12-16 22:04:03

    基于本地代理的边下边播技术分析

    我们熟知的边下边播技术，是迅雷提供的，还有之前的快播、快车等工具，它们使用的技术基本上都是P2P下载技术。 P2P下载技术，本质上它并不是C-S的架构，P2P----> Peer to Peer，实际上它将各个客户端的资源调度起来，给上传资源种子，方便后续的下载者可以快速有效的下载资源，这种方式需要服务器整合各个Client，在有用户需要下载的情况下，服务器能及时调度资源，开始给下载者提供资源信息，保证下载者下载资源越快越好。P2P的下载方式后面我们专门介绍一下。这儿不继续展开了。

  • 2020-12-16 22:07:44

    Android视频点播-边播边缓存

    一些知名的视频app客户端（优酷，爱奇艺）播放视频的时候都有一些缓存进度(二级进度缓存)，qq，微信有关的小视频，还有一些短视频app，都有边播边缓的处理。还有就是当文件缓存完毕了再次播放的话就不再请求网络了直接播放本地文件了。既节省了流程又提高了加载速度。 今天我们就是来研究讨论实现这个边播边缓存的框架，因为它不和任何的业务逻辑耦合。

  • 2020-12-16 22:46:44

    基于coturn项目的stun/turn服务器搭建

    webrtc是google推出的基于浏览器的实时语音-视频通讯架构。其典型的应用场景为：浏览器之间端到端(p2p)实时视频对话，但由于网络环境的复杂性(比如：路由器/交换机/防火墙等），浏览器与浏览器很多时候无法建立p2p连接，只能通过公网上的中继服务器(也就是所谓的turn服务器)中转。示例图如下：

  • 2020-12-16 23:06:05

    Rocket.Chat推送信息

    Rocket.Chat推送消息 Rocket.Chat是一个开源实时通讯平台, 支持Windows, Mac OS, Linux. 支持聊天, 文件上传, 视频通话, 语音通话功能. 向Rocket.Chat推送消息 以下示例可以转为别的语言的版本, 本示例使用Linux平台的curl测试, curl非常强大. 登陆 首先需要登陆Rocket.Chat服务器

  • 2020-12-17 09:01:23

    对BitTorrent Tracker源码分析

    tracker服务器是BT下载中必须的角色。一个BT client 在下载开始以及下载进行的过程中，要不停的与 tracker 服务器进行通信，以报告自己的信息，并获取其它下载client的信息。这种通信是通过 HTTP 协议进行的，又被称为 tracker HTTP 协议，它的过程是这样的： client 向 tracker 发一个HTTP 的GET请求，并把它自己的信息放在GET的参数中；这个请求的大致意思是：我是xxx（一个唯一的id），我想下载yyy文件，我的ip是aaa，我用的端口是bbb。。。