How to store a file with file extension with multer?

In Node.js projects, using the multer library to handle file uploads and store files with their original extensions is a common practice. multer is a middleware for processing multipart/form-data type data, which is commonly used for submitting forms and uploading files. Below, I will detail how to configure multer to store files with their original extensions.

Step 1: Install Multer

First, you need to install multer in your Node.js project. You can install it using npm:

bash
npm install multer

Step 2: Configure Multer Storage Engine

multer provides several storage options, including the diskStorage engine, which allows you to control the storage path and filename. When configuring diskStorage, you can specify the filename to retain the original file extension.

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

const app = express();

// Set storage engine
const storage = multer.diskStorage({
    destination: function (req, file, cb) {
        cb(null, 'uploads/') // Ensure this directory exists; otherwise, it will throw an error
    },
    filename: function (req, file, cb) {
        // Use original filename and extension
        cb(null, file.fieldname + '-' + Date.now() + path.extname(file.originalname))
    }
});

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

// Route configuration
app.post('/upload', upload.single('file'), (req, res) => {
    res.send('File upload successful');
});

app.listen(3000, () => {
    console.log('Server running at http://localhost:3000/');
});

Explanation

Storage Location (destination): Here, we store files in the uploads/ directory of the project. Ensure this directory exists in your project; otherwise, multer cannot save uploaded files.
Filename (filename): Use path.extname(file.originalname) to get the extension of the uploaded file and combine it with other information (e.g., field name, timestamp) to generate a new filename. This avoids filename conflicts and retains the file extension.

Step 3: Create Upload Route

In the above code example, we create a POST route /upload to handle file uploads. Use the upload.single('file') middleware to process the file field named file in the form.

With this configuration, when users upload files via a form, multer will automatically handle file saving and retain the file extension based on our settings.

Testing

To test the file upload functionality, you can use Postman or create a simple HTML form to upload files:

html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>File Upload</title>
</head>
<body>
    <form action="http://localhost:3000/upload" method="post" enctype="multipart/form-data">
        <input type="file" name="file">
        <button type="submit">Upload File</button>
    </form>
</body>
</html>

Access this HTML page and try uploading a file; you should see the file uploaded to the uploads directory on your server, with the original extension included in the filename.

This completes the process of using multer in Node.js to handle file uploads and save file extensions.

2024年7月18日 01:29 回复

1个答案

你的答案