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 实现跨域上传文件到存储 我没有试过,有需要再看吧