英文:
Uploading to azure blob storage via front end
问题
我想允许用户将大文件上传到Azure Blob存储。问题是，当我按照常规方式进行操作时：
[JavaScript HTTP POST请求（附带文件）-> Django Web服务器-> Azure Blob存储]
请求超时了。
有没有办法让JavaScript直接并安全地调用并上传照片到Azure Blob存储，而跳过Django Web服务器呢？
英文:
I want to allow the user to upload large files to azure blob storage.. The problem is when I do it the regular way:
[Javascript HTTP POST Request (with file attached) -> django web server -> azure blob storage]
the request times out..
Is there a way I can have Javascript call and upload photos to azure blob storage directly and securely and skip the django web server?
答案1
得分: 1
是的，你应该使用所谓的代客钥匙模式（valet key pattern）。
- 客户端将从Django Web服务器请求一个SAS令牌。Django Web服务器将连接到Azure Blob并生成一个SAS令牌，然后将其返回给客户端。
以下是你可以在Python中使用的生成SAS令牌的示例代码：
from datetime import datetime, timedelta
from azure.storage.blob import BlobServiceClient, BlobSasPermissions, generate_blob_sas
account_name = 'YOUR_STORAGE_ACCOUNT_NAME'
account_key = 'YOUR_STORAGE_ACCOUNT_KEY'
container_name = 'YOUR_CONTAINER_NAME'
blob_name = 'YOUR_BLOB_NAME'
sas_token = generate_blob_sas(
account_name=account_name,
container_name=container_name,
blob_name=blob_name,
account_key=account_key,
permission=BlobSasPermissions(write=True),
expiry=datetime.utcnow() + timedelta(hours=1)
)
print(sas_token)
- 然后，你的JavaScript客户端将使用SAS令牌直接将文件上传到Blob。
在客户端上，你可以使用Azure Blob Storage JavaScript SDK使用生成的SAS令牌上传文件：
const { BlobServiceClient } = require("@azure/storage-blob");
const sasToken = "YOUR_GENERATED_SAS_TOKEN"; // 从服务器获取
const blobServiceClient = new BlobServiceClient(`https://${accountName}.blob.core.windows.net?${sasToken}`);
async function uploadFile(file) {
const containerClient = blobServiceClient.getContainerClient(containerName);
const blockBlobClient = containerClient.getBlockBlobClient(blobName);
await blockBlobClient.uploadBrowserData(file, { blockSize: 4 * 1024 * 1024, concurrency: 20 }); // 根据需要调整参数
}
// 调用函数
const fileInput = document.getElementById("fileInput");
fileInput.addEventListener("change", async (event) => {
const file = event.target.files[0];
await uploadFile(file);
});
这是一个完整的工作示例，但使用了C#后端：
https://github.com/cfe84/demo-storage-valet-key
英文:
Yes, You should use what is known as a valet key pattern. 
- Your client will request a SAS Token from your Django web server. Django web server will connect to azure blog and generate a SAS Token and return that back to Client.
below is example code you can use in python to generate sas token.
from datetime import datetime, timedelta
from azure.storage.blob import BlobServiceClient, BlobSasPermissions, generate_blob_sas
account_name = 'YOUR_STORAGE_ACCOUNT_NAME'
account_key = 'YOUR_STORAGE_ACCOUNT_KEY'
container_name = 'YOUR_CONTAINER_NAME'
blob_name = 'YOUR_BLOB_NAME'
sas_token = generate_blob_sas(
account_name=account_name,
container_name=container_name,
blob_name=blob_name,
account_key=account_key,
permission=BlobSasPermissions(write=True),
expiry=datetime.utcnow() + timedelta(hours=1)
)
print(sas_token)
- your javascript client will then upload the file to blob using sas token directly.
On the client side, you can use the Azure Blob Storage JavaScript SDK to upload files using the generated SAS token:
const { BlobServiceClient } = require("@azure/storage-blob");
const sasToken = "YOUR_GENERATED_SAS_TOKEN"; // Get this from your server
const blobServiceClient = new BlobServiceClient(`https://${accountName}.blob.core.windows.net?${sasToken}`);
async function uploadFile(file) {
const containerClient = blobServiceClient.getContainerClient(containerName);
const blockBlobClient = containerClient.getBlockBlobClient(blobName);
await blockBlobClient.uploadBrowserData(file, { blockSize: 4 * 1024 * 1024, concurrency: 20 }); // Adjust parameters as needed
}
// Call the function
const fileInput = document.getElementById("fileInput");
fileInput.addEventListener("change", async (event) => {
const file = event.target.files[0];
await uploadFile(file);
});
A Full working example but with C# Backend.
https://github.com/cfe84/demo-storage-valet-key
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论