快捷導(dǎo)航

使用Node.js制作圖片上傳服務(wù)的詳細(xì)教程

更新時(shí)間：2025年04月14日 08:34:15 作者：Mintopia

在現(xiàn)代 Web 應(yīng)用開(kāi)發(fā)中,圖片上傳是一項(xiàng)常見(jiàn)且重要的功能,借助 Node.js 強(qiáng)大的生態(tài)系統(tǒng),我們可以輕松搭建高效的圖片上傳服務(wù),本文將深入探討如何使用 Node.js 構(gòu)建一個(gè)功能完備的圖片上傳服務(wù),需要的朋友可以參考下

準(zhǔn)備工作

我們將使用 Express 框架來(lái)搭建 Web 服務(wù)器，并借助 multer 中間件處理文件上傳。首先，確保你已經(jīng)安裝了 Node.js 和 npm。然后，創(chuàng)建一個(gè)新的項(xiàng)目目錄，并在該目錄下初始化一個(gè)新的 Node.js 項(xiàng)目：

mkdir image-upload-service
cd image-upload-service
npm init -y

接著，安裝 Express 和 multer：

npm install express multer

搭建 Express 服務(wù)器

在項(xiàng)目目錄中創(chuàng)建一個(gè)app.js文件，開(kāi)始編寫 Express 服務(wù)器代碼：

const express = require('express');
const app = express();
const port = 3000;
app.get('/', (req, res) => {
    res.send('圖片上傳服務(wù)');
});
app.listen(port, () => {
    console.log(`服務(wù)器運(yùn)行在 http://localhost:${port}`);
});

此時(shí)，運(yùn)行node app.js，在瀏覽器中訪問(wèn)http://localhost:3000，應(yīng)該能看到 “圖片上傳服務(wù)” 的提示。

配置 multer 進(jìn)行圖片上傳

multer 是一個(gè)用于處理multipart/form-data類型表單數(shù)據(jù)的中間件，非常適合處理文件上傳。在app.js中配置 multer：

const multer = require('multer');
// 配置multer存儲(chǔ)引擎，這里使用本地存儲(chǔ)
const storage = multer.diskStorage({
    destination: function (req, file, cb) {
        cb(null, 'uploads/'); // 上傳文件存儲(chǔ)目錄
    },
    filename: function (req, file, cb) {
        const uniqueSuffix = Date.now() + '-' + Math.round(Math.random() * 1E9);
        cb(null, file.fieldname + '-' + uniqueSuffix + '.' + file.originalname.split('.').pop()); // 生成唯一文件名
    }
});
const upload = multer({ storage: storage });

上述代碼中，我們定義了一個(gè)本地存儲(chǔ)引擎，將上傳的圖片存儲(chǔ)在uploads/目錄下，并為每個(gè)上傳的文件生成一個(gè)唯一的文件名。

處理圖片上傳請(qǐng)求

接下來(lái)，添加一個(gè)路由來(lái)處理圖片上傳請(qǐng)求：

app.post('/upload', upload.single('image'), (req, res) => {
    if (!req.file) {
        return res.status(400).send('沒(méi)有選擇要上傳的文件');
    }
    res.send('文件上傳成功');
});

這里使用upload.single('image')中間件來(lái)處理單個(gè)名為image的文件上傳。如果沒(méi)有文件被選中，返回 400 狀態(tài)碼。

完整代碼示例

以下是完整的app.js代碼：

const express = require('express');
const app = express();
const port = 3000;
const multer = require('multer');
const storage = multer.diskStorage({
    destination: function (req, file, cb) {
        cb(null, 'uploads/');
    },
    filename: function (req, file, cb) {
        const uniqueSuffix = Date.now() + '-' + Math.round(Math.random() * 1E9);
        cb(null, file.fieldname + '-' + uniqueSuffix + '.' + file.originalname.split('.').pop());
    }
});
const upload = multer({ storage: storage });
app.get('/', (req, res) => {
    res.send('圖片上傳服務(wù)');
});
app.post('/upload', upload.single('image'), (req, res) => {
    if (!req.file) {
        return res.status(400).send('沒(méi)有選擇要上傳的文件');
    }
    res.send('文件上傳成功');
});
app.listen(port, () => {
    console.log(`服務(wù)器運(yùn)行在 http://localhost:${port}`);
});

測(cè)試圖片上傳服務(wù)

你可以使用 Postman 或編寫一個(gè)簡(jiǎn)單的 HTML 表單來(lái)測(cè)試這個(gè)圖片上傳服務(wù)。例如，創(chuàng)建一個(gè)index.html文件：

<!DOCTYPE html>
<html>
<body>
    <h2>上傳圖片</h2>
    <form action="http://localhost:3000/upload" method="post" enctype="multipart/form-data">
        <input type="file" name="image">
        <input type="submit" value="上傳">
    </form>
</body>
</html>

在瀏覽器中打開(kāi)index.html，選擇一張圖片并點(diǎn)擊上傳，應(yīng)該能看到 “文件上傳成功” 的提示，并且在uploads/目錄下會(huì)生成上傳的圖片文件。

通過(guò)以上步驟，我們成功地在 Node.js 中搭建了一個(gè)圖片上傳服務(wù)。你可以根據(jù)實(shí)際需求進(jìn)一步擴(kuò)展和優(yōu)化這個(gè)服務(wù)，例如添加文件大小限制、圖片格式校驗(yàn)等功能。希望本文能幫助你在項(xiàng)目中順利實(shí)現(xiàn)圖片上傳功能。

以上就是使用Node.js制作圖片上傳服務(wù)的詳細(xì)教程的詳細(xì)內(nèi)容，更多關(guān)于Node.js圖片上傳服務(wù)的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章: