Я вижу, вы использовали Azure Storage JavaScript Client Library for Browsers для автоматической загрузки всех файлов в папке и всех ее подпапках в браузере.
Вот мой пример кода, который относится к официальномуПример Azure Storage JavaScript Client Library Sample for Blob Operations для установки правил CORS и получения токена sas из Azure Storage Explorer, и он работает для меня.
<html>
<head>
<script src="https://dmrelease.blob.core.windows.net/azurestoragejssample/bundle/azure-storage.blob.js"></script>
</head>
<body>
<input type='file' id="files" name="files" multiple webkitdirectory directory />
<script>
// Render via server-side to pass the value of account name and sas token, even container name.
var accountName = '<your storage account>';
var SasToken = '<sas token like sv=2018-03-28&ss=bfqt&srt=sco&sp=rwdl&st=2019-04-11T06%3A48%3A24Z&se=2019-04-12T06%3A48%3A24Z&sig=xxxxxxxxxxxxxxxxxxxx'
var blobUri = 'https://' + accountName + '.blob.core.windows.net';
var blobService = AzureStorage.Blob.createBlobServiceWithSas(blobUri,SasToken);
var containerName = '<your container name>';
document.getElementById("files").addEventListener("change", function(event) {
var files = event.target.files;
console.log(files)
for(var i in files) {
blobService.createBlockBlobFromBrowserFile(containerName, files[i].webkitRelativePath, files[i], {blockSize : files[i].size}, function(error, result, response) {
finishedOrError = true;
if (error) {
// Upload blob failed
} else {
// Upload successfully
}
})
}
});
</script>
</body>
</html>
Примечания:
Здесь я использую file.webkitRelativePath (работает только в Chrome или других браузерах на основе хрома, см. https://developer.mozilla.org/en-US/docs/Web/API/File/webkitRelativePath) вместо file.name, поскольку он включает путь к родительской папке.
Учитывая безопасность, я предлагаю по возможности сократить время истечения для токена sas и динамически отображать HTML-страницу для имени учетной записи и токена sas на стороне сервера.
В противном случае вы можете попытаться загрузить файлы в хранилище Azure на стороне сервера.
Первая страница index.html:
<form action='/upload' enctype="multipart/form-data" method="POST">
<input type='file' id="files" name="files" multiple webkitdirectory directory />
<input type="submit" value="Submit" />
</form>
На стороне сервера, используя express и multer-azure-storage:
var azure = require('azure-storage');
var accountName = '<your account name>';
var accountKey = '<your account key>';
const express = require('express');
const app = express();
const port = 3000;
var multer = require('multer');
var MulterAzureStorage = require('multer-azure-storage');
var upload = multer({
preservePath: true,
storage: new MulterAzureStorage({
azureStorageConnectionString: 'DefaultEndpointsProtocol=https;AccountName='+accountName+';AccountKey='+accountKey+';EndpointSuffix=core.windows.net',
containerName: '<your container name>',
containerSecurity: 'blob',
fileName: function(file) {
return file.originalname; // file.originalname includes parent-folder path name
}
})
});
app.use(express.static('public'));
app.post('/upload', upload.any(), function(req, res, next) {
console.log(req.files);
res.send('OK');
});
app.listen(port, () => console.log(`Example app listening on port ${port}!`));