Multer 自定义文件 Name req.body.inputTextField 作为文件名答案

【问题标题】：Multer custom file Name req.body.inputTextField as the name of the fileMulter 自定义文件 Name req.body.inputTextField 作为文件名
【发布时间】：2018-09-01 20:26:28
【问题描述】：

我无法弄清楚如何使用 req.body.fname 作为文件名，甚至尝试使用中间件，但 req.body 是空的。

var storage = multer.diskStorage({
  destination: function (req, file, cb) {
    cb(null, path);
  },
  filename: function (req, file, cb) {
    cb(null, req.body.fname)  // undefined 
  }
})
var upload = multer({ storage: storage })

app.get('/upload', upload.single('fname'), (req,res)=>{
  .......
})

i m unable to figure out how to fetch fname in fileName

index.html

<form action="/upload" method="POST" enctype= "multipart/form-data">
  <input type="text" name="fname">
  <input type="file" name="pic">
  <input type = "submit">
</form>

【问题讨论】：

标签： node.js multer multifile-uploader

【解决方案1】：

这不是一种优雅的方式，但总比没有好。

multer 不能做的事

据我所知，Multer 仅在发送实际文件后才发送 req.body 字段。因此，当您命名文件时，您将无法访问这些字段。由于 enctype 设置为 multipart，Body Parser 也将停止工作。

req.body 在哪里可以得到

虽然晚了，但 Multer 实际上还是发送了 req.body 字段。这些将在上传文件后访问：

app.post('/upload', (req, res) => {
  upload(req, res, function (err) {
    console.log(req.body.fname) // Here it works
  });
});

一个简单的解决方法

现在我们上传图片后，我们有一个名为“undefined”的文件，（顺便说一句，您可能想添加扩展名，我稍后会谈到。）我们可以通过req.file.path访问它的路径。所以现在我们调用 fs 来重命名它。它是 Node.js 原生的，因此无需安装。只需在使用前要求它：

const fs = require('fs');

然后我们回到上传过程。

app.post('/upload', (req, res) => {
  upload(req, res, function (err) {
    fs.renameSync(req.files.path, req.files.path.replace('undefined', req.body.fname));
    // This get the file and replace "undefined" with the req.body field.
  });
});

我假设您的文件路径没有名为“未定义”的文件夹。在这种不太可能的情况下，只需使用 Multer 将文件命名为其他名称，然后用 fs.renameSync 替换它。

最后一点：添加扩展

如果您不打算在 HTML 输入字段中输入扩展名，则可能需要在命名过程中附加扩展名。要获取扩展，我们可以使用 path，它也是 Node.js 的原生，只需要：

const path = require('path');

var storage = multer.diskStorage({
  destination: function (req, file, cb) {
    cb(null, path);
  },
  filename: function (req, file, cb) {
    cb(null, req.body.fname + path.extname(file.originalname))
  }
})

或者在不太可能的情况下，您需要一个“.undefined”扩展名，只需稍后在 fs 重命名过程中附加该扩展名即可。

希望这能解决您的问题。编码愉快！

【讨论】：

【解决方案2】：

multer 首先放置文件，然后获取正文，因此在提交表单时名称位于上传文件之后。我在文档 t.ly/dyp9 中找到的答案，输入的名称也可以使用，所以我取输入的值，然后将其传递给在 dom 中上传的文件的输入名称，这里是代码

var storage = multer.diskStorage({
  destination: function (req, file, cb) {
    cb(null, path);
  },
  filename: function (req, file, cb) {
    cb(null, file.filename) 
  }
})

<form action="/upload" method="POST" enctype= "multipart/form-data">
  <input type="text" name="fname">
  <input type="file" name="pic">
  <button onclick="submit()" >click me</button>
</form>
<script>
const submit = () => {
  const inputName = document.getElementsByTagName("input")[0].value;
  const pic = document.getElementsByTagName("input")[1];
  pic.name = inputName;
  const form = document.getElementsByTagName("form")[0].submit
  };
</script>

【讨论】：