个人中心
gpt4 book ai didi

javascript - Azure Blob 存储客户端上传

转载 作者：行者123 更新时间：2023-12-02 07:52:13 43 4
gpt4 key购买 nike

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

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

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

使用堆栈:Node Js(使用 EJS 作为模板引擎的 Javascript)

我尝试通过像这样传递 BlobServiceClient 来使用 browserify 构建 bundle ，

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 包集成到浏览器中的解决方案。

最佳答案

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

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

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

Index.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);

Index.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>

package.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。

enter image description here

控制台:

enter image description here

浏览器:

我复制了网址并将其粘贴到浏览器中，它起作用了。

enter image description here

上传后，它在浏览器中反射(reflect)完成。

enter image description here

门户:

enter image description here

引用:

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

关于javascript - Azure Blob 存储客户端上传，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/74395934/

43 4 0
文章推荐： sql-server - Azure 突触 : What should I do so that I can access the Power BI report on Power BI service without having to enable the "Public Network Access"?
文章推荐： reactjs - 如何将azure blob存储数据获取到Azure应用程序服务上托管的React应用程序中
文章推荐： c# - 允许字符串 C# 中两个允许值之一的优雅方式
文章推荐： azure - 如何将 Sql 查询结果从 Azure Synapse 笔记本传递到 Synapse Pipeline 中的下一个事件？
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com