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

  • 2019-12-19 16:44:01

    根据条件配置多个npm仓库

    scope 是一种很好的包管理方式。统一的“命名空间”,清晰、好辨识;在 registry 中使用统一的 organization 管理,不必担心命名冲突和冒用等。 在实际使用中,一个常见的场景是公司的私有仓库。使用统一的 scope 定义在私有仓库中定义私有包,绝对是一个非常好的方式。 指定 scope 从指定仓库安装

  • 2019-12-20 13:24:58

    瓦片地图生成使用以及原理

    我们都知道地球是圆的,电脑显示器是平的,要想让位于球面的形状显示在平面的显示器上就必然需要一个转换过程,这个过程就叫做投影(Projection)。在地球上我们通过经纬度来描述某个位置,而经过投影之后的地图也有自己的坐标系统,本篇文章就来详细介绍在百度地图API中涉及的各种坐标体系。

  • 2019-12-20 13:27:16

    腾讯地图谷歌和高德地图等自定义地图区别

    腾讯、百度、Google的地图投影均采用Web Mercator 投影坐标系;腾讯与Google的地图瓦片分辨率及切片范围是完全相同的,仅仅是命名规则稍有不同,这就使得同一位置和缩放级别的地图瓦片是完全可以重叠的;而百度地图每个缩放级别分辨率与前两者均不相同,而且地图瓦片的坐标原点做了一定的偏移,导致百度地图与前两者的瓦片是无法重叠的,这是因为百度在GCJ-02的基础上又进行了加密处理,形成了百度独有的BD-09坐标系。

  • 2019-12-22 08:06:48

    如何快速撤销上一次的commit

    在平时工作中使用git难免会提交一些错误的文件到git库里,这时候,撤销吧,怕把正确的文件删除了,不撤销重新改又很麻烦,下面,我就从提交的三个阶段,来讲解如何撤销错误的操作。