英文:
Uploading to azure blob storage via front end
问题
有没有办法让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
是的，您应该使用所称为的代客钥匙模式。
- 您的客户端将从您的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
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论