jquery - 如何使用 Ember Droplet 将文件上传到 Node.js？

Question

我正在使用此接口(interface)在我的应用程序上上传文件:

https://github.com/Wildhoney/EmberDroplet

我的应用程序在 Node.js 上运行，Ember 是我正在使用的客户端框架。我还需要使用 Azure 存储服务来存储上传的文件/图像。

但是，由于我对这个概念和工具(Node 和 Ember，因此 EmberDroplet)非常陌生，所以我不明白如何通过 Ember Droplet 上传文件，然后将其发送到我的 Node 服务器命令将其上传到 Azure。

我已经安装了 Azure-Storage 包并测试了它是否可以直接在 Node.js 上上传。这有效。

我已将 Ember-Droplet mixin 与我的界面集成，它确实需要将文件拖入其中或通过文件输入选择。

我不知道如何连接这两个:EmberDroplet 有一个名为 uploadallfiles 的函数，它似乎将提供的文件数组作为输入并从中创建一个 XHR 对象，并且在返回其 jQuery promise 之前，它发送XHR 请求随之而来。

我的问题是:如何设置我的应用程序，以便在执行 uploadallfiles 时，我的 node.js 服务器可以访问它们，以便将它们上传到 azure，然后在模型中存储对其的引用文件与关联？

后续问题是这样的:Azure 关于使用 Azure 与 Node 的教程展示了如何通过其文件路径获取本地存储的文件，然后将其上传到 Blob 存储。然而，

1. 客户端应用程序可以将本地文件路径发送到服务器并且仍然可以正常工作吗？我的印象是服务器端代码无法访问客户端本地存储。
2. Azure 可以使用 XHR 而不是文件路径进行上传吗？
3. 通过 azure-storage 上传文件需要采用特定格式吗？

Answer 1

回答您的问题:

1. 不可以，服务器无法直接访问客户端存储 - 您必须将文件本身发布到服务器(而不仅仅是路径)
2. 您可以从客户端 JavaScript 直接上传到 Azure，但相对复杂。您需要为客户端代码生成共享访问签名 (SAS) 以用作上传端点，然后使用 jQuery PUT 到该 URL。 Gaurav Mantri 在他的博客上有一个很好的例子:http://gauravmantri.com/2013/02/16/uploading-large-files-in-windows-azure-blob-storage-using-shared-access-signature-html-and-javascript/
3. Blob 存储在大多数意图和用途上与本地文件系统非常相似，因此您无需担心任何重大限制。如果您的用户正在上传文件，您应该能够将它们直接推送到 Blob 存储。

关于您关于 Ember 和 Ember-Droplet 的问题，Ember-Droplet 有一些很棒的示例代码，它们展示了实现服务器端所需的内容。请看以下摘录:https://github.com/Wildhoney/EmberDroplet/blob/master/example/node-server/server.js

// Responsible for handling the file upload.
app.post('/upload', function(request, response) {

    var files       = request.files.file,
        promises    = [];

    /**
     * @method uploadFile
     * @param file {Object}
     * @return {Object}
     */
    var uploadFile = function uploadFile(file) {

        var deferred = new Deferred();

        fileSystem.readFile(file.path, function (error, data) {
            var filePath = __dirname + '/uploaded-files/' + file.name;
            fileSystem.writeFile(filePath, data, function() {});
            deferred.resolve(file.name);
        });

        return deferred.promise;

    };

    if (!Array.isArray(files)) {

        // We're dealing with only one file.
        var promise = uploadFile(files);
        promises.push(promise);

    } else {

        // We're dealing with many files.
        files.forEach(function(file) {
            var promise = uploadFile(file);
            promises.push(promise);
        });

    }

    promisedIo.all(promises).then(function(files) {
        response.send({ files: files, success: true });
        response.end();
    });

});

显然，假设您使用的是 Express，但无论如何，它表明您需要实现与 dropletUrl 相对应的 post 方法(如 Controller 中指定的: https://github.com/Wildhoney/EmberDroplet/blob/master/example/scripts/controller.js )来处理接收文件。

然后，您需要将 uploadFile 的实现替换为使用 Azure Node SDK 写入 Azure 存储的内容。我整理了这个你可以使用的小函数:

var azure = require('azure-storage');
var blobService = azure.createBlobService('mystorageaccountname', 'mystorageaccountkey', 'https://mystorageaccountname.blob.core.windows.net');

var uploadFile = function(file) {
    var deferred = new Deferred();

    blobService.createBlockBlobFromFile('mycontainername', file.name, file.path, function(error, result, response) {
        if (!error) {
            deferred.resolve(file.name);
        }
    });

    return deferred.promise;
};

如果将该函数放入 Ember-Droplet 示例服务器实现中以代替现有函数，则最终服务器会将文件写入 Blob 存储。请注意，您需要使用有效的存储帐户名称、存储帐户 key 和 Blob 容器名称来代替上面的占位符(包括在对 azure.createBlobService 的调用中指定的主机字符串中)。