使用socketio-file-upload上传多个文件答案

【问题标题】：Using socketio-file-upload to upload multiple files使用socketio-file-upload上传多个文件
【发布时间】：2018-04-02 02:58:07
【问题描述】：

我正在使用带有 socket.io 和 socketio-file-upload 的 NodeJS 来上传多个文件，效果很好！但是我遇到了一个问题，我试图保存输入的名称属性，这些文件将它们保存到我的数据库中。

当我上传 1 个或多个文件时，我似乎无法访问输入字段名称或显示哪些文件来自哪个输入字段的内容。

这是我的正面：

var uploader = new SocketIOFileUpload(socket);

var array_files_lvl_3 = [
    document.getElementById("l3_id_front"),
    document.getElementById("l3_id_back"),
    document.getElementById("l3_address_proof_1"),
    document.getElementById("l3_address_proof_2"),
    document.getElementById("l3_passport")
];

uploader.listenOnArraySubmit(document.getElementById("save_level_3"), array_files_lvl_3);

这是我的背影：

var uploader = new siofu();
uploader.dir = "uploads/userL3";
uploader.listen(socket);

uploader.on('saved', function(evnt){
    console.log(evnt);
    //this "event" variable has a lot of information 
    //but none of it tells me the input name where it came from.
});

这就是“evnt”变量所持有的：

【问题讨论】：

标签： node.js mongodb file-upload npm socket.io

【解决方案1】：

很遗憾，图书馆没有发送该信息。因此，您无法执行任何现有配置。所以这需要修改代码。

client.js:374

var _fileSelectCallback = function (event) {
    var files = event.target.files || event.dataTransfer.files;
    event.preventDefault();
    var source = event.target;
    _baseFileSelectCallback(files, source);

client.js:343

var _baseFileSelectCallback = function (files, source) {
    if (files.length === 0) return;

    // Ensure existence of meta property on each file
    for (var i = 0; i < files.length; i++) {
        if (source) {
            if (!files[i].meta) files[i].meta = {
                sourceElementId: source.id || "",
                sourceElementName: source.name || ""
            };
        } else {
            if (!files[i].meta) files[i].meta = {};
        }
    }

在这些更改之后，我可以在event.file.meta 中获得详细信息

【讨论】：

【解决方案2】：

我是socketio-file-upload的作者。

目前似乎没有记录特定的输入字段，但这并不是一个很难添加的功能。有人打开了a new issue 并留下了指向这个 SO 问题的反向指针。

解决方法是直接使用submitFiles 而不是listenOnArraySubmit。像这样的东西可能会起作用（未经测试）：

// add a manual listener on your submit button
document.getElementById("save_level_3").addEventListener("click", () => {
  let index = 0;
  for (let element of array_files_lvl_3) {
    let files = element.files;
    for (let file of files) {
      file.meta = { index };
    }
    uploader.submitFiles(files);
    index++;
  }
});

【讨论】：