如何自动将文件夹上传到天蓝色？

Question

现在我有了这部分代码，它显示了目录中的所有文件夹。

        var dirPath = path.join("C:\\", 'ILJATEST');
    fs.readdir(dirPath, function (err, files) {
        if (err) {
            return console.log('Unable to scan dir ' + err);
        }
        files.forEach(function (file) {

            console.log(file);
        });
    });

这部分，我可以在单击按钮时选择文件并上传到 Azure blob 存储。 （这是工作）

        document.getElementById('upload-button').addEventListener('click', () => {
        const file = document.getElementById('fileinput').files[0];
        blobService.createBlockBlobFromBrowserFile('mycontainer',
            file.name,
            file,
            (error, result) => {
                if (error) {
                    // Handle blob error
                } else {
                    console.log('Upload is successful');
                }
            });
    });

如何将这些代码组合到所有文件夹中，当应用程序启动时，自动上传来自 C:ILJATEST 的文件？

Answer 1

我看到您使用Azure Storage JavaScript Client Library for Browsers 自动上传浏览器中文件夹及其所有子文件夹下的所有文件。

这是我的示例代码，参考官方示例 Azure Storage JavaScript Client Library Sample for Blob Operations 来设置 CORS 规则并从 Azure 存储资源管理器获取 sas 令牌，它对我有用。

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

注意事项：

1. 在这里，我使用file.webkitRelativePath（仅适用于Chrome或其他基于chromium的浏览器，请参考https://developer.mozilla.org/en-US/docs/Web/API/File/webkitRelativePath）而不是file.name，因为它包含父文件夹路径。

2. 考虑到安全性，我建议尽可能减少sas token的过期时间，并在服务器端动态呈现账户名和sas token的HTML页面。

否则，您可以尝试将文件上传到服务器端的 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}!`));