Nodejs如何上传多个文件

Nodejs如何上传多个文件

   现在有两个以上file表单,一个上传我是知道的，但处理两个，两个以上的就不知道如何处理了，（我想实现 的是批量上传多张图片，返回上传 成功信息 如果有一张没成功就要说明是哪一张）有哪 一个大师帮我一下。

10 回复

当然可以！在 Node.js 中处理多个文件上传通常涉及到前端表单的设置以及后端的处理。以下是一个简单的示例，展示如何使用 express 和 multer 这两个库来实现批量上传多个文件。

前端表单

首先，你需要创建一个 HTML 表单，允许用户选择多个文件进行上传：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Multiple File Upload</title>
</head>
<body>
    <form action="/upload" method="post" enctype="multipart/form-data">
        <input type="file" name="files[]" multiple>
        <button type="submit">Upload</button>
    </form>
</body>
</html>

这里我们使用了一个带有 multiple 属性的 <input type="file"> 元素，这样用户可以选择多个文件。

后端处理

接下来，我们需要在 Node.js 中设置一个服务器来接收这些文件。我们将使用 express 和 multer 库来处理文件上传：

  1. 安装必要的依赖：
npm install express multer
  1. 创建服务器代码：
const express = require('express');
const multer = require('multer');
const path = require('path');

const app = express();
const upload = multer({ dest: 'uploads/' });

app.post('/upload', upload.array('files[]'), (req, res) => {
    const files = req.files;
    if (!files || files.length === 0) {
        return res.status(400).send('No files were uploaded.');
    }

    let successFiles = [];
    let failedFiles = [];

    files.forEach(file => {
        try {
            // Perform any additional checks or processing here
            successFiles.push(file.originalname);
        } catch (error) {
            failedFiles.push(file.originalname);
        }
    });

    res.json({
        success: successFiles,
        failure: failedFiles
    });
});

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

在这个例子中，我们使用 multer 来处理文件上传，并将文件保存到 uploads/ 目录下。然后，我们遍历上传的文件列表，检查每个文件是否成功处理，并将成功和失败的文件分别记录下来。

解释

  • 前端：HTML 表单允许用户选择多个文件并提交给服务器。
  • 后端：
    • 使用 multer 处理文件上传，配置存储位置。
    • 在 /upload 路由中处理 POST 请求。
    • 遍历上传的文件列表，检查每个文件是否成功处理。
    • 返回成功和失败的文件列表。

通过这种方式，你可以轻松地实现批量上传多个文件，并返回详细的上传结果。


单个的实现我是这样的

fs.readFile(req.files['file'].path, function(err, data){ 
         fs.writeFile(newPath, data, function(err){
               //上传成功
          })
     });

各位大哥有人知道吗

和你说一下思路吧，浏览器端提交的时候不要多个文件一起提交，而是一个上传完成，再提交下一个。这样服务器端每次只接收一个文件。 这个东西浏览器端要处理的东西比较多，比如怎样多选文件，怎样处理IE对fileInput.click()调用的安全屏蔽，是不是支持拖放之类的。

我实现了一个多图上传,可以看看有没有帮助 http://www.9958.pw/post/nodejs_upload_images

你可以多写几个input file控件，req.files里有全部信息的。

好东西 收藏下可以么？

这个简单…

我发现这样上传，req.files.pics将空的和不空的pics都取过来的话，file_obj里空的pics会自动排到非空的pics前面，不知道有没顺序取的方法

为了实现多个文件的批量上传并处理每一张文件的成功或失败情况，我们可以使用 multer 这个流行的 Node.js 中间件来处理文件上传。下面将详细介绍如何配置和使用 multer 来实现这个功能。

安装依赖

首先，你需要安装 express 和 multer：

npm install express multer

创建服务器

接下来，创建一个简单的 Express 应用来处理文件上传：

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

const app = express();

// 配置 multer
const storage = multer.diskStorage({
  destination: function (req, file, cb) {
    cb(null, 'uploads/') // 指定存储目录
  },
  filename: function (req, file, cb) {
    cb(null, file.fieldname + '-' + Date.now() + path.extname(file.originalname)) // 自定义文件名
  }
});

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

app.use(express.static('public'));

app.post('/upload', upload.array('files', 12), (req, res) => {
  try {
    const files = req.files;
    if (!files || files.length === 0) {
      return res.status(400).send('没有文件上传');
    }

    let success = true;
    let failedFiles = [];

    files.forEach(file => {
      if (file.size === 0) {
        success = false;
        failedFiles.push(file.originalname);
      }
    });

    if (success) {
      res.send('所有文件上传成功！');
    } else {
      res.status(400).send(`以下文件上传失败：${failedFiles.join(', ')}`);
    }
  } catch (error) {
    console.error(error);
    res.status(500).send('服务器错误');
  }
});

app.listen(3000, () => {
  console.log('服务器运行在 http://localhost:3000');
});

HTML 表单

确保你的前端表单允许选择多个文件：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>上传文件</title>
</head>
<body>
<form action="/upload" method="post" enctype="multipart/form-data">
  <input type="file" name="files" multiple>
  <button type="submit">上传</button>
</form>
</body>
</html>

运行应用

启动应用后，你可以通过访问 http://localhost:3000 并使用表单提交多个文件来测试这个功能。如果一切正常，你应该会看到相应的上传成功或失败的信息。

这个例子展示了如何使用 multer 处理文件上传，并且能够识别哪些文件成功上传以及哪些失败。希望这能帮助你完成多文件上传的需求。

回到顶部