azure - 直接从浏览器将文件上传到 Azure Blob 存储？

Question

是否可以创建一个 html 表单，以允许 Web 用户直接将文件上传到 azure blob 存储，而无需使用其他服务器作为中介？ S3 和 GAW blobstore 都允许这样做，但我找不到任何对 azure blob 存储的支持。

Answer 1

编辑 2019 年 11 月

现在可以引用官方文档:

• Azure Storage JavaScript Client Library Sample for Blob Operations
• Azure Storage client library for JavaScript

初始答案

有一个New Azure Storage JavaScript client library for browsers (Preview) .

(这篇文章中的所有内容均来自上面的原始文章)

• 适用于 Azure 存储的 JavaScript 客户端库支持使用 Blob、表、队列和文件等存储服务的许多 Web 开发场景，并且与现代浏览器兼容
• 新的浏览器 JavaScript 客户端库支持最新 REST API 版本 2016-05-31 中提供的所有存储功能，因为它是使用适用于 Node.js 的 Azure 存储客户端库通过 Browserify 构建的

We highly recommend use of SAS tokens to authenticate with Azure Storage since the JavaScript Client Library will expose the authentication token to the user in the browser. A SAS token with limited scope and time is highly recommended. In an ideal web application it is expected that the backend application will authenticate users when they log on, and will then provide a SAS token to the client for authorizing access to the Storage account. This removes the need to authenticate using an account key. Check out the Azure Function sample in our Github repository that generates a SAS token upon an HTTP POST request.

代码示例:

1. 在 HTML 代码中插入以下脚本标记。确保 JavaScript 文件位于同一文件夹中。

   <script src="azure-storage.common.js"></script/>
   <script src="azure-storage.blob.js"></script/>
   

2. 现在让我们向页面添加一些项目以启动传输。在 BODY 标签内添加以下标签。请注意，单击该按钮时会调用 uploadBlobFromText 方法。我们将在下一步中定义此方法。

   <input type="text" id="text" name="text" value="Hello World!" />
   <button id="upload-button" onclick="uploadBlobFromText()">Upload</button>
   

3. 到目前为止，我们已经包含了客户端库并添加了 HTML 代码来向用户显示文本输入和启动传输的按钮。当用户单击上传按钮时，uploadBlobFromText 将被调用。现在让我们定义一下:

   <script>
   function uploadBlobFromText() {
       // your account and SAS information
       var sasKey ="....";
       var blobUri = "http://<accountname>.blob.core.windows.net";
       var blobService = AzureStorage.createBlobServiceWithSas(blobUri, sasKey).withFilter(new AzureStorage.ExponentialRetryPolicyFilter());
       var text = document.getElementById('text');
       var btn = document.getElementById("upload-button");
       blobService.createBlockBlobFromText('mycontainer', 'myblob', text.value,  function(error, result, response){
           if (error) {
               alert('Upload filed, open browser console for more detailed info.');
               console.log(error);
           } else {
               alert('Upload successfully!');
           }
       });
   }
   </script>