【问题标题】:Node/Multer | Can't get sperarte filename based on fieldname节点/Multer |无法根据字段名获取 sperarte 文件名
【发布时间】:2019-02-06 00:57:01
【问题描述】:

我结合multer 创建了一个 Express 应用程序,用于在我的 Node.js 应用程序中上传项目

我尝试做的是选择让我们说:

Upload 1 - that has a fieldname of upfile1
Upload 2 - that has a fieldname of upfile2
Upload 3 - that has a fieldname of upfile3

基本上,我需要分别选择我的多上传应用程序的每个上传的文件名项。每次上传都需要在应用程序中针对不同的任务进行不同的处理。让我们以 console.log 为例,我需要做一些类似的事情:

console.log(req.body.upfile1.filename);
console.log(req.body.upfile2.filename);
console.log(req.body.upfile3.filename);

使用在我的视图中使用 name 属性定义的不同字段名来选择在应用程序中处理的不同项目。

下面是我的代码

查看 [index.html]

<form id="app-form" method="POST" class="fileupload" method="post" action="app" enctype="multipart/form-data">
<h1>Multi File Uploads</h1>
<input type="file" name="upfile1" value="">
<input type="file" name="upfile2" value="">
<input type="file" name="upfile3" value="">
<input type="submit" />
</form>

NodeJS [app.js]

app.get("/", function(req, res) {
  res.sendFile(__dirname + "/index.html");
});

app.post("/app", upload.any(), function(req, res) {
 let files = req.files;
 files.forEach(file => {
   console.log(file.filename);
});
 res.send(req.files);
 res.end();
});

非常感谢您的帮助,谢谢!

【问题讨论】:

  • req.body.upfile1 而非req.files 上的文件名。还可以在 index.html 上使用带有&lt;form action="/app" method="POST"&gt; 的表单
  • 别忘了enctype="multipart/form-data"
  • 我的表单已经使用&lt;form action="/app" method="POST"&gt; 我只是没有在我的问题中写它。我现在也用req.body.upfile1console.log("upfile is: " + req.files.upfile); 尝试了你的建议,但它在控制台中显示upfile is: undefined
  • 我现在更新了我的问题并包含了我在那里的表单操作

标签: javascript node.js node-modules multer


【解决方案1】:

标记中的输入元素必须包含在表单中(它们可能已经包含在表单元素中,但未在您的问题中显示)。您还应该设置表单的enctype attribute to multipart/form-data

<form method="post" enctype="multipart/form-data" action="/upload">
    <input type="file" name="upfile1">
    <input type="file" name="upfile2">
    <input type="file" name="upfile3">

    <input type="submit" value="Submit">
</form>

完成后,您可以配置 multer 并创建路由来处理文件上传:

const upload = multer({
  dest: path.join(__dirname, './upload') // You might want to change this according to your preferences
  // Since you're using any(), you might want to set fileFilter to control which files should be uploaded. See: https://github.com/expressjs/multer#filefilter
});

const findFileByFieldname = (files, fieldname) => {
  return files.find(file => file.fieldname === fieldname) || {};
}

app.post("/upload", upload.any(), (req, res) => {     
  const upfile1Filename = findFileByFieldname(req.files, 'upfile1').filename;
  const upfile2Filename = findFileByFieldname(req.files, 'upfile2').filename;
  const upfile3Filename = findFileByFieldname(req.files, 'upfile3').filename;

  res.json({
    upfile1Filename,
    upfile2Filename,
    upfile3Filename,
  });
});

// Example response (Node v8.11.4, Express v4.16.3, Multer v1.3.1)
// {"upfile1Filename":"360726b532a01b0e31832f067b5922c8","upfile2Filename":"144e1298437afb51f36eb37c77814650","upfile3Filename":"4c908da20e770130377e4006db945af6"}

【讨论】:

  • 谢谢,您的代码显示所有 fieldname 并上传 filename 但我如何稍后在我的代码中单独选择它们,如 console.log("upfile2 file is:" + req.body.upfile2.filename); 以获得每个选定 fieldnamefilename这个例子upfile2 单独连接以后每个fieldname 上传到我的应用程序中的不同任务?我不知道如何像在我的 console.log 示例中那样单独选择它们,希望你知道。
  • @Cody 我修改了答案并添加了一个名为 findFileByFieldname 的函数,该函数获取一个 Multer 文件对象数组和一个 fieldname 并在传递的文件中找到具有指定 fieldname 的文件对象files 数组。我还修改了路由处理程序以将文件名存储到 3 个不同的变量中。希望对您有所帮助。
  • 非常感谢!我喜欢你的解决方案,你真的帮了我很多,非常感谢你的帮助!
  • 只是一个小问题,如果我使用您的代码上传多个文件,那么fieldname get 的第一个文件在 console.log 中被识别,您是否可以提供一种方法来使用您的代码仅在可能的情况下为每个fieldname 上传我的意思是如果upfile1 在文件中包含两个文件上传只有第一个文件得到识别只是想问您是否可以提供一种方法,它可以识别更多然后一个文件每个fieldname 上传。
  • 我开始使用HTML &lt;input&gt; multiple Attributelink 为每个fieldname 上传多个文件,但它只识别上传的第一个文件。希望您知道我的意思,并会对此提供帮助,再次感谢。
猜你喜欢
  • 2016-03-23
  • 2019-10-04
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2021-10-30
相关资源
最近更新 更多