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