Question

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

/static/js/index.js

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

js

启动应用程序后，如何将这些代码合并到所有具有自动上传的C：ILJATEST文件的文件夹中？

Answer 1

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

这是我的示例代码，它引用了官方示例Azure Storage JavaScript Client Library Sample for Blob Operations来设置CORS规则并从Azure Storage Explorer中获取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>

注意：

在这里，我使用file.webkitRelativePath（仅适用于Chrome或其他基于铬的浏览器，请参阅https://developer.mozilla.org/en-US/docs/Web/API/File/webkitRelativePath）而不是file.name，因为它包括父-文件夹路径。
考虑到安全性，我建议尽可能减少sas令牌的到期时间，并在服务器端动态呈现帐户名和sas令牌的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}!`));

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

1 个答案: