用nodejs中的multer软件包简化文件上传-DEV365 开发者社区

在当今世界，文件上传已成为Web应用程序中非常普遍的功能。 Node.js提供了一种简便的方法来处理Web应用程序中的文件上传。在multer和formidable（例如multer）等第三方软件包的帮助下，可以轻松处理文件上传。

在本文中，我们将探索如何使用Multer在Node.js中的文件上传并构建API后端，以上传单个和多个文件。

痣

multer提供了一种轻松的方法来处理Node.js中的文件上传。它提供了许多选择文件上传过程的选项，并且具有以下功能：

使用可自定义的文件名和存储位置上传
限制文件大小
根据其Mime类型过滤文件
一次处理多个文件

如果您要构建具有文件上传功能的Web应用程序，则值得考虑multer。

要求

express.js：设置express.js服务器来处理http请求并构建API端点。
multer：使用NPM安装Multer中间件包。 Multer是一种流行的中间件，可以在Node.js。

初始化nodejs项目

设置项目目录：在您的本地计算机上使用名称fileshare创建一个新的目录。

mkdir fileShare

i nitialize项目：打开终端或命令提示符，导航到您创建的项目目录，然后运行以下命令以初始化新的node.js project：

npm init

此命令将提示您提供有关项目的信息，例如项目名称，版本，描述，输入点等。您可以填写详细信息或按Enter接受默认值。

安装所需的依赖项：在这里我们将安装Express.js，Multer和Nodemon来创建此项目

npm install --save express


npm install --save multer


npm install --save-dev nodemon

设置软件包。JSON

{
  "name": "fileshare",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "dev": "nodemon index.mjs",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "dotenv": "^16.0.3",
    "express": "^4.18.2",
    "multer": "^1.4.5-lts.1"
  },
  "devDependencies": {
    "nodemon": "^2.0.22"
  }
}

创建一个index.mjs文件：此index.mjs文件将包含我们的代码来处理文件上传

touch index.mjs

文件夹结构ð

实施：

设置Express Server

import express from 'express';
import dotenv from 'dotenv';

const PORT = process.env.PORT || 3000;
const env = process.env.NODE_ENV || 'development';

if (env === 'development') {
    dotenv.config();
} else {
    dotenv.config({ path: '.env.prod' });
    console.log = function() { };
}

const app = express();

app.listen(PORT, () => console.log(`Server started on port ${PORT}`));

创建一个文件夹以上传文件

import express from 'express';
import path from 'path';
import fs from 'fs';
import dotenv from 'dotenv';

const PORT = process.env.PORT || 3000;
const env = process.env.NODE_ENV || 'development';

if (env === 'development') {
    dotenv.config();
} else {
    dotenv.config({ path: '.env.prod' });
    console.log = function() { };
}

const app = express();

const __dirname = path.resolve();
console.log(' __dirname : ',__ dirname);
const uploadFolder = path.join(__dirname, 'uploads');
console.log('uploadFolder : ', uploadFolder);

//Create a folder if not exist
fs.mkdirSync(uploadFolder, { recursive: true });

app.listen(PORT, () => console.log(`Server started on port ${PORT}`));

在上面的代码中， fs.mkdirsync（）将创建一个文件夹，如果不存在，将在当前目录中创建此文件夹

Multer的初始化

import express from 'express';
import multer from 'multer';
import path from 'path';
import fs from 'fs';
import dotenv from 'dotenv';

const PORT = process.env.PORT || 3000;
const env = process.env.NODE_ENV || 'development';

if (env === 'development') {
    dotenv.config();
} else {
    dotenv.config({ path: '.env.prod' });
    console.log = function() { };
}

const app = express();

const __dirname = path.resolve();
console.log(' __dirname : ',__ dirname);
const uploadFolder = path.join(__dirname, 'uploads');
console.log('uploadFolder : ', uploadFolder);

//Create a folder if not exist
fs.mkdirSync(uploadFolder, { recursive: true });

const storage = multer.diskStorage({
    destination: function(_req, file, cb) {
        console.log('file : ', file);
        return cb(null, uploadFolder)
    },
    filename: function(_req, file, cb) {
        console.log('file from filename function : ', file);
        let origFileName = file.originalname.split('.')[0];
        let filename = origFileName + '-' + Date.now() + path.extname(file.originalname);
        console.log('filename : ', filename);
        return cb(null, filename)
    }
});
const upload = multer({ storage: storage });

app.listen(PORT, () => console.log(`Server started on port ${PORT}`));

创建一个帖子端点，以处理单个和多个文件上传

import express from 'express';
import multer from 'multer';
import path from 'path';
import fs from 'fs';
import dotenv from 'dotenv';

const PORT = process.env.PORT || 3000;
const env = process.env.NODE_ENV || 'development';

if (env === 'development') {
    dotenv.config();
} else {
    dotenv.config({ path: '.env.prod' });
    console.log = function() { };
}

const app = express();

const __dirname = path.resolve();
console.log(' __dirname : ',__ dirname);
const uploadFolder = path.join(__dirname, 'uploads');
console.log('uploadFolder : ', uploadFolder);

//Create a folder if not exist
fs.mkdirSync(uploadFolder, { recursive: true });

const storage = multer.diskStorage({
    destination: function(_req, file, cb) {
        console.log('file : ', file);
        return cb(null, uploadFolder)
    },
    filename: function(_req, file, cb) {
        console.log('file from filename function : ', file);
        let origFileName = file.originalname.split('.')[0];
        let filename = origFileName + '-' + Date.now() + path.extname(file.originalname);
        console.log('filename : ', filename);
        return cb(null, filename)
    }
});

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

app.post('/api/upload', upload.single('file'), (req, res) => {
    console.log('req.file : ', req.file);
    res.status(201).json({
        status: "success",
        message: "File upload successfully!!",
    });
});

// upload multiple files
app.post('/api/upload-multiple', upload.array('files'), (req, res) => {
    console.log('req.files : ', req.files);
    res.status(201).json({ files: req.files });
});

app.listen(PORT, () => console.log(`Server started on port ${PORT}`));

在上面的代码中，我们为multer设置了一个存储引擎，以定义将存储上传的文件的位置。然后设置multer中间件来处理文件上传。

创建一个获取终点以获取所有上传文件

import express from 'express';
import multer from 'multer';
import path from 'path';
import fs from 'fs';
import dotenv from 'dotenv';

const PORT = process.env.PORT || 3000;
const env = process.env.NODE_ENV || 'development';

if (env === 'development') {
    dotenv.config();
} else {
    dotenv.config({ path: '.env.prod' });
    console.log = function() { };
}

const app = express();

const __dirname = path.resolve();
console.log(' __dirname : ',__ dirname);
const uploadFolder = path.join(__dirname, 'uploads');
console.log('uploadFolder : ', uploadFolder);

//Create a folder if not exist
fs.mkdirSync(uploadFolder, { recursive: true });

const storage = multer.diskStorage({
    destination: function(_req, file, cb) {
        console.log('file : ', file);
        return cb(null, uploadFolder)
    },
    filename: function(_req, file, cb) {
        console.log('file from filename function : ', file);
        let origFileName = file.originalname.split('.')[0];
        let filename = origFileName + '-' + Date.now() + path.extname(file.originalname);
        console.log('filename : ', filename);
        return cb(null, filename)
    }
});

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

app.get('/', (_req, res) => {
    let fileList = fs.readdirSync(uploadFolder);
    console.log('fileList : ', fileList);
    res.status(200).json({ fileList });
});

app.post('/api/upload', upload.single('file'), (req, res) => {
    console.log('req.file : ', req.file);
    res.status(201).json({
        status: "success",
        message: "File upload successfully!!",
    });
});

// upload multiple files
app.post('/api/upload-multiple', upload.array('files'), (req, res) => {
    console.log('req.files : ', req.files);
    res.status(201).json({ files: req.files });
});

app.listen(PORT, () => console.log(`Server started on port ${PORT}`));

使用此API后端到位，您可以轻松地处理Web应用程序中的文件上传。

测试API端点

使用 curl 命令上传单个文件

curl --location --request POST 'http://localhost:3000/api/upload' \
    --form 'file=@"filename_one.txt"'

使用 curl 命令上传多个文件

curl --location --request POST 'http://localhost:3000/api/upload-multiple' \
    --form 'files=@"filename_one.txt"' \
    --form 'files=@"filename_two.txt"'

结论

在诸如Multer之类的软件包的帮助下，Node.js中的文件上传变得非常容易。它提供了一种简单的方法，可以使用许多自定义选项来处理文件上传。如果您要构建具有文件上传功能的Web应用程序。

该项目的完整源代码很容易在GitHub上获得。通过访问存储库，您可以探索代码，查看其结构并利用它来增强您的理解或进一步开发自己的node.js项目。随时访问GitHub存储库以访问完整的源代码并利用它来满足您的需求。

痣

要求

初始化nodejs项目

文件夹结构ð

实施：

测试API端点

结论

Link