node+express实现图片上传功能

时间 2019-11-16

标签 node+express node express 实现图片上传功能繁體版

原文原文链接

概述

本篇文章适用于node刚刚入门的读者。html

本篇文章使用node+express实现了一个简单的图片上传功能：用户点击图片上传，会跳转到上传成功页面并展现上传的图片。node

前言

一直想找资料入门node，试着一步步实现一个功能，都没有合适的资料。直到看到www.nodebeginner.org/index-zh-cn… ，这本书教你如何一步一步结合基本的API搭建一个简单的应用，实现了简单的图片上传功能。我看完以后终于感受本身基本入门node了。文章中有附源码地址，github.com/manuelkiess… ，若是你感受尚未入门node，能够试试这本书。git

固然个人建议是跟着教程一步步修改代码，而不是直接将源码clone下来。github

问题

文章到后面给出页面展现的html是以response.write(body);的方式写的express

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实现一样的功能，使咱们的代码看起来更优雅npm

node+express实现图片上传功能

环境

mac+node(v9.2.0)+expressjson

安装express

express官网:www.expressjs.com.cn/bash

新建文件夹node-app，在文件夹下新建package.json文件app

{
  "name": "node-app",
  "version": "0.0.1",
  "dependencies": {
    "express": "^4.16.2",
  }
}复制代码

运行npm install。新建app.js，代码以下post

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…