Nodejs 文件上传问题

Nodejs 文件上传问题

express有个multer,文件上传非常容易，就是我想用username这个表单填的数据作为这个上传图片的文件名但是 API里 fieldname 指的是下面的那个name=‘photo‘吧，能把username得到的作为photo的文件名吗？ <form method=‘post’ action=’/upload’ enctype=‘multipart/form-data’ > <input type=“file” name=‘photo’/><br> <input type=“text” name=‘username’/><br> <input type=“submit” /> </form>


6 回复

express有个multer,文件上传非常容易，就是我想用username这个表单填的数据作为这个上传图片的文件名但是 API里 fieldname 指的是下面的那个name=‘photo‘吧，能把username得到的作为photo的文件名吗？ <form method=‘post’ action=’/upload’ enctype=‘multipart/form-data’ > <input type=“file” name=‘photo’/><br> <input type=“text” name=‘username’/><br> <input type=“submit” /> </form>


fieldname - Field name specified in the form

建议阅读文档

老问题还没解决，顶一顶

1、可以在上传完了fs重命名一下。 2、个人觉得可以用js监听username input的输入，同步到file input的name属性中去- -

当然可以！在使用 Multer 进行文件上传时，你可以通过自定义 Multer 的存储配置来实现将 username 表单数据作为上传图片的文件名。以下是一个完整的示例，包括前端 HTML 和后端 Node.js 代码。

前端 HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>File Upload</title>
</head>
<body>
    <form method="POST" action="/upload" enctype="multipart/form-data">
        <input type="file" name="photo"/><br>
        <input type="text" name="username"/><br>
        <input type="submit" />
    </form>
</body>
</html>

后端 Node.js 代码

首先确保你已经安装了 Express 和 Multer：

npm install express multer

然后创建一个简单的 Express 应用来处理文件上传：

const express = require('express');
const multer = require('multer');

const app = express();

// 配置 Multer 存储选项
const storage = multer.diskStorage({
    destination: function (req, file, cb) {
        cb(null, 'uploads/') // 指定保存文件的目录
    },
    filename: function (req, file, cb) {
        // 使用 username 作为文件名
        const uniqueSuffix = Date.now() + '-' + Math.round(Math.random() * 1E9);
        cb(null, req.body.username + '-' + uniqueSuffix + '.' + file.originalname.split('.').pop());
    }
});

const upload = multer({ storage: storage });

app.post('/upload', upload.single('photo'), (req, res) => {
    if (!req.file) {
        return res.status(400).send('No file uploaded.');
    }

    res.send(`File uploaded successfully as ${req.file.filename}`);
});

app.listen(3000, () => {
    console.log('Server is running on port 3000');
});

解释

  1. Multer 配置：

    • destination 函数用于指定文件保存的位置。
    • filename 函数用于生成文件名。这里我们使用 req.body.username 作为文件名的一部分，并添加时间戳和随机数以确保文件名唯一。

  2. 路由处理：

    • /upload 路由使用 upload.single('photo') 中间件来处理单个文件上传。
    • 在回调函数中，你可以访问上传的文件信息（如 req.file），并返回成功响应。

这样，当你提交表单时，username 输入框中的值会被用作文件名的一部分，确保每个上传的文件都有唯一的名称。

要在使用 Multer 进行文件上传时，将表单中的 username 字段值用作上传文件的名称，你需要自定义文件命名逻辑。Multer 提供了这样一个功能，允许你在处理文件上传时指定一个函数来生成文件名。

以下是如何实现这一点的示例：

  1. 首先确保你已经安装了 Express 和 Multer：

    npm install express multer

  2. 创建你的 Node.js 应用程序，并设置 Multer 以使用自定义文件名：

const express = require('express');
const multer = require('multer');

const app = express();

// 设置 Multer 存储配置
const storage = multer.diskStorage({
  destination: function (req, file, cb) {
    cb(null, 'uploads/') // 保存文件的目标目录
  },
  filename: function (req, file, cb) {
    // 获取 username 的值并作为文件名
    const uniqueSuffix = Date.now() + '-' + req.body.username;
    cb(null, file.fieldname + '-' + uniqueSuffix + '.' + file.originalname.split('.').pop());
  }
});

const upload = multer({ storage: storage });

app.post('/upload', upload.single('photo'), (req, res) => {
  // 响应请求，告诉用户上传成功
  res.send('File uploaded successfully!');
});

app.listen(3000, () => console.log('Server started on port 3000'));

解释：

  • destination: 设置文件上传后的存储路径。

  • filename: 这个函数用于生成文件名。在这个例子中，我们结合了 file.fieldname（这里是 photo）以及 req.body.username（从表单提交的数据中获取的用户名）作为文件名的一部分，同时添加了一个时间戳来保证文件名的独特性。

  • upload.single(‘photo’): 这表示 Multer 将会处理表单中 name="photo" 的文件字段。

通过这种方式，你可以根据用户提交的 username 来命名上传的文件，从而达到题目中的需求。

回到顶部