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

  • 2020-04-14 15:35:52

    caniuse前端兼容性检查和使用

    相信大家都曾用caniuse网站查询过css、js的一些兼容性问题,并且都从它反馈的兼容性数据中获益,让我们的线上项目更加稳定、和谐的跑在用户电脑里。不过对于caniuse页面上的一些细节,我们可能会感到困惑或者模棱两可,今天就带着大家一起来重新认识caniuse这个网站,并对它的原理和细节做些探究。

  • 2020-04-15 17:00:07

    export和import的理解,这一篇问扎根就够了

    在 ES6 之前,社区制定了一些模块加载方案,最主要的有 CommonJS 和 AMD 两种。前者用于服务器,后者用于浏览器。ES6 在语言标准的层面上,实现了模块功能,而且实现得相当简单,完全可以取代 CommonJS 和 AMD 规范,成为浏览器和服务器通用的模块解决方案。

  • 2020-04-15 21:14:13

    .d.ts与.ts的区别 .d.ts怎么用

    在TypeScript项目中直接引入Javascript包是不能使用的,因为包中缺少TypeScript类型声明,如果是自己写的包,可以考虑自己增加一个.d.ts类型声明文件,如果代码比较多或者使用的是第三方的包,自己写就比较麻烦了。第三方的包首先考虑找一个别人写好的声明文件,如果没有可以使用一些自动生成声明文件的工具。

  • 2020-04-17 09:27:38

    推荐一个老前端开发者的博客

    前端修炼场,首页标签大全greenSock前端研究VUE研究我们的作品flash技术探讨开发心得个人档案培训与招聘服务报价

  • 2020-04-17 09:41:47

    前端css博客推荐

    这个博客有大量的css内容,有svg,TweenMax等教程,抽空通读一下