node+express實現圖片上傳功能

深藍一人發表於2019-03-04
Express

概述

本篇文章適用於node剛剛入門的讀者。

本篇文章使用node+express實現了一個簡單的圖片上傳功能：使用者點選圖片上傳，會跳轉到上傳成功頁面並展示上傳的圖片。

前言

一直想找資料入門node，試著一步步實現一個功能，都沒有合適的資料。直到看到www.nodebeginner.org/index-zh-cn… ，這本書教你如何一步一步結合基本的API搭建一個簡單的應用，實現了簡單的圖片上傳功能。我看完之後終於感覺自己基本入門node了。文章中有附原始碼地址，github.com/manuelkiess… ，如果你感覺還沒有入門node，可以試試這本書。

當然我的建議是跟著教程一步步修改程式碼，而不是直接將原始碼clone下來。

問題

文章到後面給出頁面展示的html是以response.write(body);的方式寫的

function start(response) {
console.log("Request handler 'start' was called.");

var body = '<html>'+
'<head>'+
'<meta http-equiv="Content-Type" content="text/html; '+
'charset=UTF-8" />'+
'</head>'+
'<body>'+
'<form action="/upload" enctype="multipart/form-data" '+
'method="post">'+
'<input type="file" name="upload" multiple="multiple">'+
'<input type="submit" value="Upload file" />'+
'</form>'+
'</body>'+
'</html>';

response.writeHead(200, {"Content-Type": "text/html"});
response.write(body);
response.end();
}複製程式碼

實際應用中肯定不能以這樣的方式寫html檔案，所以接下來就教你用node+express實現同樣的功能，使我們的程式碼看起來更優雅

node+express實現圖片上傳功能

環境

mac+node(v9.2.0)+express

安裝express

express官網:www.expressjs.com.cn/

新建資料夾node-app，在資料夾下新建package.json檔案

{
  "name": "node-app",
  "version": "0.0.1",
  "dependencies": {
    "express": "^4.16.2",
  }
}複製程式碼

執行npm install。新建app.js，程式碼如下

var express = require('express');
var app = express();

app.get('/', function (req, res) {
    res.send('Hello World!');
});

var server = app.listen(3000, function () {
    var host = server.address().address;
    var port = server.address().port;

    console.log('Example app listening at http://%s:%s', host, port);
});複製程式碼

執行node app.js，開啟localhost:3000，應用已經跑起來了

利用 Express 託管靜態檔案

下面利用 Express 託管靜態檔案，在node-app下新建資料夾public，新建兩個html檔案

  • start.html
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>請上傳您的檔案</title>
</head>
<body>
<form action="./upload.html" enctype="multipart/form-data" method="get">
    <input type="file" name="upload" multiple="multiple">
    <input type="submit" value="Upload file" />
</form>
</body>
</html>複製程式碼
  • upload.html
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>上傳成功</title>
</head>
<body>
    <h1>上傳成功</h1>
</body>
</html>複製程式碼

修改app.js，增加app.use('/public', express.static('public'));。修改後app.js如下

var express = require('express');
var app = express();

app.get('/', function (req, res) {
    res.send('Hello World!');
});

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

var server = app.listen(3000, function () {
    var host = server.address().address;
    var port = server.address().port;

    console.log('Example app listening at http://%s:%s', host, port);
});複製程式碼

現在，public 目錄下面的檔案就可以訪問了。

參考文件：www.expressjs.com.cn/starter/sta…

重啟node服務，開啟
http://localhost:3000/public/start.html，選擇檔案上傳之後，頁面就會自動跳轉到上傳成功頁面

處理上傳的圖片

使用模組formidable處理請求資料。在package.json中增加

  "dependencies": {
    "express": "^4.16.2",
    "formidable": "^1.1.1"
  }複製程式碼

執行npm install。

檔案上傳自然要用到post請求,更改start.html，改為method="post"

<form action="/upload" enctype="multipart/form-data" method="post">
    <input type="file" name="upload" multiple="multiple">
    <input type="submit" value="Upload file" />
</form>複製程式碼

處理post請求用到的Express的路由

參考 www.expressjs.com.cn/starter/bas…

修改後的app.js如下：

var express = require('express');
var app = express();
var formidable = require("formidable");
fs = require("fs");

app.get('/', function (req, res) {
    res.send('Hello World!');
});

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

app.post('/upload', function (req, res) {
    var form = new formidable.IncomingForm();
    console.log("about to parse");
    form.parse(req, function(error, fields, files) {
        console.log("parsing done");
        console.log(files.upload.path);
        fs.writeFileSync("public/test.png", fs.readFileSync(files.upload.path));
        res.redirect("/public/upload.html") ;
    });
});

var server = app.listen(3000, function () {
    var host = server.address().address;
    var port = server.address().port;

    console.log('Example app listening at http://%s:%s', host, port);
});複製程式碼

在public資料夾下修改upload.html,

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>上傳成功</title>
</head>
<body>
    <h1>上傳成功</h1>
    <img  src="/public/test.png"/>
</body>
</html>複製程式碼

嗯，大功告成啦。重新啟動服務，開啟 http://localhost:3000/public/start.html 選擇一個圖片上傳，就能看到自己上傳的圖片了！

原始碼附上，github.com/Lie8466/nod…

感謝您的閱讀！這是我的學習過程，但願對您有幫助。

參考文件

www.nodebeginner.org/index-zh-cn…

相關文章