node+express реализует функцию загрузки изображений

Node.js Express

Обзор

Эта статья предназначена для читателей, которые только начинают работать с Node.

В этой статье node+express используется для реализации простой функции загрузки изображения: пользователь нажимает на изображение для загрузки, оно переходит на страницу успешной загрузки и отображает загруженное изображение.

предисловие

Я искал информацию, чтобы начать работу с узлом, пытаясь реализовать функцию шаг за шагом, но подходящей информации нет. пока не увидишьwoohoo.node beginner.org/index-this-talent…, эта книга научит вас, какШаг за шагомВ сочетании с базовым API для создания простого приложения реализована простая функция загрузки изображений. Я наконец-то чувствую себя после просмотраНачинаяузел. Адрес исходного кода прикреплен к статье,GitHub.com/Мануэль Киес…, если вы чувствуете, что еще не начали работу с узлом, вы можете прочитать эту книгу.

Конечно, я предлагаю следовать руководству и шаг за шагом изменять код, а не клонировать исходный код напрямую.

вопрос

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

установить экспресс

официальный сайт экспресс: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);
});

Теперь файлы в общем каталоге доступны.

Справочная документация:woohoo.express JS.com.can/starter/это он…

Перезапустите службу узла, откройте
http://localhost:3000/public/start.html, после выбора загрузки файла страница автоматически перейдет на страницу успешной загрузки

Обработать загруженные изображения

Используйте модулиformidableОбработать данные запроса. существуетpackage.jsonувеличить в

  "dependencies": {
    "express": "^4.16.2",
    "formidable": "^1.1.1"
  }

бегатьnpm install.

Загрузка файла, естественно, использует почтовый запрос, изменение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>

Экспресс-маршруты, используемые для обработки почтовых запросов

Ссылаться наwoohoo.express JS.com.can/starter/barca…

после редактирования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…

Спасибо за прочтение! Это мой процесс обучения, надеюсь, он вам поможет.

Справочная документация

woohoo.node beginner.org/index-this-talent…

Категории