Загрузка изображений с помощью Express

Question

Загрузка изображений с помощью Express

1

Я создаю REST Api, где он содержит довольно много изображений с помощью Express. Структура проекта показана ниже.

И внутри общей папки вы можете видеть эту структуру.

Я хочу загрузить изображения и сохранить их в папке img. Итак, вот мой код.

fileupload.html

        <html>
        <head>
        <title>File Uploading Form</title>
        </head>
        <body>
        <h3>File Upload:</h3>
        Select a file to upload: <br />
        <form action="http://127.0.0.1:3000/fileupload" method="POST" enctype="multipart/form-data">
        <input type="file" name="file" size="50" />
        <br />
        <input type="submit" value="Upload File" />
        </form>
        </body>
        </html>

и fileupload.js

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

            var bodyParser = require('body-parser');
            var multer  = require('multer');

            //console.log(multer);

            app.use(express.static('public'));
            app.use(bodyParser.urlencoded({ extended: false }));
            app.use(multer({ dest: '/img'}));

            app.get('fileupload.html', function (req, res) {
               res.sendFile( __dirname + "/" + "fileupload.html" );
            })

            app.post('/fileupload', function (req, res) {

               console.log(req.files.file.name);
               console.log(req.files.file.path);
               console.log(req.files.file.type);

               var file = __dirname + "/img" + req.files.file.name;
               fs.readFile( req.files.file.path, function (err, data) {
                    fs.writeFile(file, data, function (err) {
                     if( err ){
                          console.log( err );
                     }else{
                           response = {
                               message:'File uploaded successfully',
                               filename:req.files.file.name
                          };
                      }
                      console.log( response );
                      res.end( JSON.stringify( response ) );
                   });
               });
            })

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

              console.log("Example app listening at localhost:3000/", host, port)
            })

app.js

                    var express = require('express');
                var path = require('path');
                var favicon = require('serve-favicon');
                var logger = require('morgan');
                var cookieParser = require('cookie-parser');
                var bodyParser = require('body-parser');
                var mongoose = require('mongoose');
                var url = 'mongodb://localhost:27017/larissaApp';

                mongoose.connect(url);
                var db = mongoose.connection;
                db.on('error',console.error.bind(console,'connection error:'));
                db.once('open',function(){
                   console.log("Connected correctly to server"); 
                });

                var routes = require('./routes/index');
                var users = require('./routes/users');
                var newsRouter = require('./routes/newsRouter');

                var app = express();
                // view engine setup
                app.set('views', path.join(__dirname, 'views'));
                app.set('view engine', 'jade');
                // uncomment after placing your favicon in /public
                //app.use(favicon(path.join(__dirname, 'public', 'favicon.ico')));
                app.use(logger('dev'));
                app.use( bodyParser.json({limit: '50mb'}) );
                app.use(bodyParser.urlencoded({
                  limit: '50mb',
                  extended: true,
                  parameterLimit:50000
                }));
                app.use(bodyParser.urlencoded({ extended: false }));
                app.use(cookieParser());
                app.use(express.static(path.join(__dirname, 'public')));

                app.use('/', routes);
                app.use('/users', users);
                app.use('/news',newsRouter);

                // catch 404 and forward to error handler
                app.use(function(req, res, next) {
                  var err = new Error('Not Found');
                  err.status = 404;
                  next(err);
                });
                // error handlers
                // development error handler
                // will print stacktrace
                if (app.get('env') === 'development') {
                  app.use(function(err, req, res, next) {
                    res.status(err.status || 500);
                    res.render('error', {
                      message: err.message,
                      error: err
                    });
                  });
                }
                // production error handler
                // no stacktraces leaked to user
                app.use(function(err, req, res, next) {
                  res.status(err.status || 500);
                  res.render('error', {
                    message: err.message,
                    error: {}
                  });
                });
                module.exports = app;

Однако после попытки загрузить изображение с html-страницы я получаю ошибку 404.

                404

            Error: Not Found
                at C:\Users\Theodosios\Desktop\larissa-node\larissaApp\rest-server\app.js:40:13
                at Layer.handle [as handle_request] (C:\Users\Theodosios\Desktop\larissa-node\larissaApp\rest-server\node_modules\express\lib\router\layer.js:95:5)
                at trim_prefix (C:\Users\Theodosios\Desktop\larissa-node\larissaApp\rest-server\node_modules\express\lib\router\index.js:317:13)
                at C:\Users\Theodosios\Desktop\larissa-node\larissaApp\rest-server\node_modules\express\lib\router\index.js:284:7
                at Function.process_params (C:\Users\Theodosios\Desktop\larissa-node\larissaApp\rest-server\node_modules\express\lib\router\index.js:335:12)
                at next (C:\Users\Theodosios\Desktop\larissa-node\larissaApp\rest-server\node_modules\express\lib\router\index.js:275:10)
                at C:\Users\Theodosios\Desktop\larissa-node\larissaApp\rest-server\node_modules\express\lib\router\index.js:635:15
                at next (C:\Users\Theodosios\Desktop\larissa-node\larissaApp\rest-server\node_modules\express\lib\router\index.js:260:14)
                at Function.handle (C:\Users\Theodosios\Desktop\larissa-node\larissaApp\rest-server\node_modules\express\lib\router\index.js:174:3)
                at router (C:\Users\Theodosios\Desktop\larissa-node\larissaApp\rest-server\node_modules\express\lib\router\index.js:47:12)
                at Layer.handle [as handle_request] (C:\Users\Theodosios\Desktop\larissa-node\larissaApp\rest-server\node_modules\express\lib\router\layer.js:95:5)
                at trim_prefix (C:\Users\Theodosios\Desktop\larissa-node\larissaApp\rest-server\node_modules\express\lib\router\index.js:317:13)
                at C:\Users\Theodosios\Desktop\larissa-node\larissaApp\rest-server\node_modules\express\lib\router\index.js:284:7
                at Function.process_params (C:\Users\Theodosios\Desktop\larissa-node\larissaApp\rest-server\node_modules\express\lib\router\index.js:335:12)
                at next (C:\Users\Theodosios\Desktop\larissa-node\larissaApp\rest-server\node_modules\express\lib\router\index.js:275:10)
                at serveStatic (C:\Users\Theodosios\Desktop\larissa-node\larissaApp\rest-server\node_modules\serve-static\index.js:75:16)

Что я делаю неправильно?

Спасибо,

Тео.

Theo 10 июнь 2017, в 11:18

Источник

Теги:

javascript

express

file-upload

2 ответа

Ещё вопросы

Shekspir · Answer 1 · 2017-06-10T09-32-00.000Z

Попробуй это.

Я немного изменил ваш js, он работает для меня без ошибок.

Я написал комментарии для каждой отредактированной строки.

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

var bodyParser = require('body-parser');
var multer = require('multer');

//console.log(multer);

app.use(express.static('public'));
app.use(bodyParser.urlencoded({extended: false}));
var upload = multer({dest: './img'});// declare multer default path(best to use /tmp for this if on linux)

app.get('fileupload.html', function (req, res) {
    res.sendFile(__dirname + "/" + "fileupload.html");
});


app.post('/fileupload', upload.single('file')/*inserted  multer middleware for one file*/, function (req, res) {
    //Declare variable to easy change
    var file = req.file;

    // this are correct names for variables of req.file
    console.log(file.filename);
    console.log(file.path);
    console.log(file.mimetype);

    // path of file stored
    var path = __dirname + '/img/';
    // variable for storing path
    var filePath = path + file.filename;
    //It better to declare variable first then use it
    var response;
    fs.readFile(filePath, function (err, data) {
        fs.writeFile(path + file.originalname, data, function (err) {
            if (err) {
                console.log(err);
            } else {
                response = {
                    message: 'File uploaded successfully',
                    filename: file.originalname
                };
            }
            console.log(response);
            res.end(JSON.stringify(response));
        });
    });
});

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

    console.log("Example app listening at localhost:3000/", host, port)
});

Спасибо за ответ, но у меня все та же ошибка. Как вы это запустили? В почтальоне? Какой URL вы использовали?
Какую версию узла вы используете? Я просто открываю HTML в браузере и загружаю изображение.
6.9.5. Мои другие маршруты, которые я создал, работают нормально.
Извините, я все равно не вижу, что вы включили fileupload.js в ваш app.js или наоборот, у вас есть два отдельных приложения? Кроме того, в app.js нет прослушивателя сервера.
хм ... я не знаю, что не так в моем случае.
@ Ты можешь ответить на вопрос выше? Если возможно, можете ли вы заархивировать свой проект и дать ссылку, чтобы я мог проверить.
что вы указали в качестве действия в своей HTML-форме?
Я хочу, чтобы часть загрузки изображений была в моем app.js.
Конечно. Я буду загружать его в GitHub, и вы можете проверить это оттуда. 1 мин, пожалуйста.
Я также использую mongoose для хранения объекта массива новостей. Эта часть работает нормально, и может хранить ее в mongodb.
просто работайте с частью загрузки изображений.
Хорошо, теперь я получил вашу ошибку
Давайте продолжим эту дискуссию в чате .

navnit kapadiya · Answer 2 · 2017-06-10T07-28-00.000Z

Загрузите код для загрузки изображений с помощью Express

Загрузка файла с помощью экспресс