Azure Blob 存储客户端上传答案

【问题标题】：Azure Blob Storage Client Side UploadAzure Blob 存储客户端上传
【发布时间】：2022-12-15 07:50:06
【问题描述】：

对于我的节点 js 项目，我使用了 AWS S3 存储桶并使用 AWS SDK 从前端上传文件。

同样，我的文件存储现在需要迁移到Azure Blob 存储

有没有办法从客户端直接上传到 Azure Blob 存储？

使用 Stack：Node Js（以 EJS 作为模板引擎的 Javascript）

我尝试使用构建一个包浏览器化通过像这样传递 BlobServiceClient，

var { BlobServiceClient } = require("@azure/storage-blob");
window.BlobServiceClient = BlobServiceClient;

但它显示错误，如TypeError: BlobServiceClient is not a constructor

最后，我想用 Azure blob 存储功能替换 S3 存储桶上传功能，我想从“@azure/storage-blob”中获取 BlobServiceClient，这样我就不必在前面更改太多代码结尾。

请帮助解决方案将 azure storage npm 包集成到浏览器中。

【问题讨论】：

标签： javascript node.js azure azure-blob-storage azure-storage

【解决方案1】：

我在我的环境中进行了尝试，并使用浏览器成功地将文件上传到 Azure blob 存储中。

在开始之前，您需要安装两个包。

1.npm install @azure/storage-blob
2.npm install parcel

索引.js

const { BlobServiceClient } = require("@azure/storage-blob"); 
const  selectButton = document.getElementById("select-button");
const  fileInput = document.getElementById("file-input");
const  blobSasUrl = "<your sas url >";

const  blobServiceClient = new  BlobServiceClient(blobSasUrl);
const  containerName = "test";
const  containerClient = blobServiceClient.getContainerClient(containerName);
const  uploadFiles = async () => {
try {
const  promises = [];
for (const  file  of  fileInput.files) {
const  blockBlobClient = containerClient.getBlockBlobClient(file.name);
promises.push(blockBlobClient.uploadData(file));
}
await  Promise.all(promises);
alert("Done.");
}
catch (error) {
alert(error.message);
}
}
selectButton.addEventListener("click", () =>  fileInput.click());

fileInput.addEventListener("change", uploadFiles);

索引.html：

<!DOCTYPE  html>

<html>
<body>

<button  id="select-button">Select and upload files</button>

<input  type="file"  id="file-input"  multiple  style="display: none;"  />

<script  type="module"  src="index.js"></script>

</body>
</html>

包.json

{

"name": "blob-quickstart-v12",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"start": "parcel ./index.html"
},
"keywords": [],
"author": "",
"license": "ISC",
"browserslist": [
"last 1 Edge version",
"last 1 Chrome version",
"last 1 Firefox version",
"last 1 safari version",
"last 1 webkit version"
],
"dependencies": {
"@azure/storage-blob": "^12.12.0",
 "parcel": "^2.8.0"
 },
 "devDependencies": {
 "buffer": "^5.7.1"}
 }

你可以获得Blob SAS-URL通过检查下图。

安慰：

浏览器：

我复制了Url并粘贴在浏览器中它起作用了。

上传后它反映在浏览器中完成。

门户网站：

参考：

Get started with Azure Blob Storage and JavaScript - Azure Storage | Microsoft Learn

【讨论】：

谢谢你的努力，这个方法很好用。但是，就我而言，我正在运行一个 Node Js (Express) 项目。由于我没有使用 Parcel 来运行我的项目，并且前端不支持 require 函数，我如何将 Azure bundle/SDK 集成到我的项目中？

【解决方案2】：

要在浏览器中使用此客户端库，首先需要使用捆绑器。具体操作方法请参考我们的bundling documentation

https://github.com/Azure/azure-sdk-for-js/blob/main/sdk/storage/storage-blob/README.md?plain=1#L99

【讨论】：