Подтвердить что ты не робот

Как загрузить файл с помощью multer или body-parser

Я новичок NodeJS, следуя книге "Веб-разработка с MongoDB и NodeJS". Я застрял в своей главе 6 с "multer". Когда я использую multer для загрузки файлов, сервер выдает следующую ошибку:

/Users/fk / Documents / imageuploader / node_modules / express / lib / application.js: 209
throw new TypeError('app.use() requires middleware functions'); ^

TypeError: app.use() requires middleware functions

но когда я заменяю его bodyParser, сервер запускается, но когда я нажимаю кнопку "Загрузить", он дает мне следующую ошибку в браузере.

500 TypeError: Cannot read property 'file' of undefined

Однако он должен перенаправить меня на другую страницу, на которой показан загруженный файл.

Вот мой код bodyParser, пожалуйста, посмотрите, правильно ли я его использую, потому что он дает мне "body-parser revrecated" при запуске сервера. Я видел другие вопросы, такие как мои, и я следовал, но никто из них не работает.

app.use(bodyParser.json());
app.use(bodyParser.urlencoded({
  extended: true
}));

app.use(bodyParser({
  uploadDir: path.join(__dirname, '../public/upload/temp')
}));

Следующий код показывает, как я использую multer, на всякий случай, если что-то я не должен делать, сообщите мне. Какой из них лучше в случае загрузки файлов, body-parser или multer?

app.use(multer({
  dest: path.join(__dirname, '../public/upload/temp')
}));


var saveImage = function() {
  var possible = 'abcdefghijklmnopqrstuvwxyz0123456789',
    imgUrl = '';

  for (var i = 0; i < 6; i += 1) {
    imgUrl += possible.charAt(Math.floor(Math.random() * possible.length));
  }

  var tempPath = req.files.file.path,
    ext = path.extname(req.files.file.name).toLowerCase(),
    targetPath = path.resolve('./public/upload/' + imgUrl + ext);

  if (ext === '.png' || ext === '.jpg' || ext === '.jpeg' || ext === '.gif') {
    fs.rename(tempPath, targetPath, function(err) {
      if (err) throw err;
      res.redirect('/images/' + imgUrl);
    });
  } else {
    fs.unlink(tempPath, function() {
      if (err) throw err;

      res.json(500, {
        error: 'Only image files are allowed.'
      });
    });
  }
};
saveImage();

Предполагаемый блок кода - это логика, которую я использую для загрузки файла. В ошибке это ссылается на "файл" как undefined, который находится в следующей строке функции saveImage. Он не может получить путь и, следовательно, выдает ошибку 500 в соответствии с другой частью функции saveImage. Почему здесь находится "файл" undefined? Я не понимаю.

var tempPath = req.files.file.path,
4b9b3361

Ответ 1

multer() возвращает генератор промежуточного программного обеспечения, который использует указанные вами параметры, поэтому вы не можете передать его возвращаемое значение непосредственно на app.use(). Вы можете увидеть все типы промежуточного программного обеспечения, которые он может генерировать в документации, но обычно сгенерированное промежуточное ПО добавляется на уровне маршрута, а не во всем мире другие синтаксические анализаторы. Это связано с тем, что вы обычно передадите имя поля (ов) файла, которое вы ожидаете.

Например, это будет принимать один файл (вместе с любыми нефайловыми полями), имя поля формы которого foo:

var upload = multer({
  dest: path.join(__dirname, '../public/upload/temp')
});

// ...

app.post('/upload', upload.single('foo'), function(req, res) {
  if (req.file) {
    console.dir(req.file);
    return res.end('Thank you for the file');
  }
  res.end('Missing file');
});

Кроме того, body-parser в настоящее время не экспортирует промежуточное программное обеспечение multipart/form-data -capable, поэтому вы не можете использовать этот модуль для обработки загруженных файлов (ну, не дожидаясь передачи строки в кодировке base64 в форме application/x-www-form-urlencoded или что-то еще, но это намного менее эффективно).

Ответ 2

Вот базовый код для загрузки файлов в MEAN, пожалуйста, проверьте

HTML

<form id="frmDoc" name="frmDocument" ng-submit="upload()" class="form-horizontal form-bordered" enctype="multipart/form-data" >
        <fieldset>
            <div class="form-group">
                <label class="col-md-4 control-label" for="val_email">Document<span class="text-danger">*</span></label>
                <div class="col-md-4">
                    <div class="input-group">
                    <input type="file" name="file" id='file' required="required" />
                    </div>
                </div>
            </div>
        </fieldset>
        <div class="form-group form-actions">
            <div class="col-md-8 col-md-offset-4">
                <button type="submit" class="btn btn-sm btn-primary"><i class="fa fa-upload"></i> submit</button>
            </div>
        </div>
    </form>

КЛИЕНТСКИЙ СТОРОННЫЙ КОД

app.controller ('myctrl',function($scope,$http){

  $scope.upload = function () {
            var file = angular.element(document.querySelector('#file')).prop("files")[0];
                $scope.files = [];
                $scope.files.push(file);
                $http({
                    method: 'POST',
                    url: '/users/upload',
                    headers: { 'Content-Type': undefined },
                    transformRequest: function (data) {
                        var formData = new FormData();
                        formData.append('model', angular.toJson(data.model));
                        formData.append('file', data.files[0]);
                        return formData;
                    },
                    data: { model: { title: 'hello'}, files: $scope.files }

                }).success(function (res) {
                    console.log(res)
                });
        }


});

СЕРДЕЧНЫЙ КОД СЕРВЕРОВ

var multer  = require('multer');
var mkdirp = require('mkdirp');

var storage = multer.diskStorage({
  destination: function (req, file, cb) {
    //var code = JSON.parse(req.body.model).empCode;
    var dest = 'public/uploads/';
    mkdirp(dest, function (err) {
        if (err) cb(err, dest);
        else cb(null, dest);
    });
  },
  filename: function (req, file, cb) {
    cb(null, Date.now()+'-'+file.originalname);
  }
});

var upload = multer({ storage: storage });

router.post('/upload', upload.any(), function(req , res){
    console.log(req.body);
    res.send(req.files);
});

Ответ 3

Код для загрузки файла с помощью Multer и сохранения его в локальной папке

const multer = require('multer') // import library
const moment = require('moment')
const q = require('q')
const _ = require('underscore')
const fs = require('fs')
let dir = './public'

/** Store file on local folder */
let storage = multer.diskStorage({
    destination: function (req, file, cb) {
        cb(null, dir)
    },
    filename: function (req, file, cb) {
        let date = moment(moment.now()).format('YYYYMMDDHHMMSS')
        cb(null, date + '_' + file.originalname.replace(/-/g, '_').replace(/ /g, '_'))
    }
})

/** Upload files */
let upload = multer({ storage: storage }).array('files')

/** Exports fileUpload function */
module.exports = {
    fileUpload: function (req) {
        let deferred = q.defer()

        /** Create dir if not exist */
        if (!fs.existsSync(dir)) {
            fs.mkdirSync(dir)
            console.log('\n\n ${dir} dose not exist, hence created \n\n')
        }

        upload(req, {}, function (err) {
            if (req && (_.isEmpty(req.files))) {
                deferred.resolve({ status: 200, message: 'File not attached', data: [] })
            } else {
                if (err) {
                    deferred.reject({ status: 400, message: 'error', data: err })
                } else {
                    deferred.resolve({
                        status: 200,
                        message: 'File attached',
                        filename: _.pluck(req.files,
                            'filename'),
                        data: req.files
                    })
                }
            }
        })
        return deferred.promise
    }
}