前端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-04-03 10:22:20

    JQuery如何监听DIV内容变化

    这几天在做一个微博的接入,需要判断微博是否被关注,要检查微博标签的DIV是否有“已关注”的字符,但这个DIV的内容是微博JSSDK动态生成。$("#id").html()是获取不到我想要的内容。原因是当我们获取的时候内容还没有改变,所以获取不到,如果就想到监听这个DIV内容变化后,再来获取就个时候就能获取到了。于是产生新的问题,如何监听DIV的变化?

  • 2018-04-04 23:52:03

    PowerManager之PowerManager

    当你在做一些事情时,如果持续时间过长,那么一段时间后屏幕会灭掉,如果你想在你做这些事时屏幕始终保持点亮状态,那么你需要WakeLock的帮助。

  • 2018-04-07 23:35:16

    使用Intent传递对象的两种方式

    Intent 的用法相信你已经比较熟悉了,我们可以借助它来启动活动、发送广播、启动服务等。在进行上述操作的时候,我们还可以在Intent 中添加一些附加数据,以达到传值的效果,比如在FirstActivity 中添加如下代码:

  • 2018-04-10 14:59:59

    JS实现数组去重方法总结(六种方法)

    这篇文章给大家总结下JS实现数组去重方法(六种方法),面试中也经常会遇到这个问题。文中给大家引申的还有合并数组并去重的方法,感兴趣的朋友跟随脚本之家小编一起学习吧

  • 2018-04-13 17:28:33

    jsoup 使用总结4--高级用法之 script js 脚本

    大部分时候,我们使用jsoup解析网页的时候,都是直接找到某一类元素,或者按某种selector查询;具体使用方法可以参考jsoup官网文档 那么你有没有实际操作过,查找script js 脚本呢,因为很多时候页面的内容是根据js动态生成的,或者数据是动态变更;那么这个时候,我们只是获取html页面中script js脚本之间的内容。

  • 2018-04-15 12:56:05

    WebView控件之WebSettings各种配置方法源码总结

    WebSettings用于管理WebView状态配置,当WebView第一次被创建时,WebView包含着一个默认的配置,这些默认的配置将通过get方法返回,通过WebView中的getSettings方法获得一个WebSettings对象,如果一个WebView被销毁,在WebSettings中所有回调方法将抛出IllegalStateException异常。