前端js传文件到Azure storage

2021-01-05 17:00:16

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

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

创建Containers   


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

文件名字.jpg

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

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    
});    
}

上面 返回 '

?newSAS

'''

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

代码又两种写法 下面

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

blobName

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


第二种权限定位在了容器

containerName

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

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);


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服务中

  • 2018-12-07 08:26:37

    mysql线程池和连接池的区别

    可能有的DBA会把线程池和连接池混淆,其实两者是有很大区别的,连接池一般在客户端设置,而线程池是在DB服务器上配置;另外连接池可以取到避免了连接频繁创建和销毁,但是无法取到控制MySQL活动线程数的目标,在高并发场景下,无法取到保护DB的作用。比较好的方式是将连接池和线程池结合起来使用。 作者:飞鸿无痕 链接:https://www.jianshu.com/p/88e606eca2a5 來源:简书 简书著作权归作者所有,任何形式的转载都请联系作者获得授权并注明出处。

  • 2018-12-07 17:47:24

    linux中wc命令用法

    Linux系统中的wc(Word Count)命令的功能为统计指定文件中的字节数、字数、行数,并将统计结果显示输出。

  • 2018-12-07 22:19:33

    修改 Nginx 进程最大可打开文件数(worker_processes和worker_connections)

    worker_processes:操作系统启动多少个工作进程运行Nginx。注意是工作进程,不是有多少个nginx工程。在Nginx运行的时候,会启动两种进程,一种是主进程master process;一种是工作进程worker process。例如我在配置文件中将worker_processes设置为4,启动Nginx后,使用进程查看命令观察名字叫做nginx的进程信息,我会看到如下结果:

  • 2018-12-07 22:55:02

    nginx worker_processes 配置

    据另一种说法是,nginx开启太多的进程,会影响主进程调度,所以占用的cpu会增高, 这个说法我个人没有证实,估计他们是开了一两百个进程来对比的吧。