Загрузить файл с помощью ng-file-upload и mongo gridfs

Question

Я хочу загрузить файл размером более 16 МБ в мою базу данных Mongo. На передней части я использую модуль ng-file-upload (https://github.com/danialfarid/ng-file-upload). На серверной стороне, я использую подключения-Busboy и gridfs-потоковые модули

Я получаю следующее сообщение об ошибке: POST/API/файлы/500 3,084 мс - 1992 Ошибка: неподдерживаемый тип содержимого: приложения/JSON ; кодировка = UTF-8 в Busboy.parseHeaders (C: ... \ node_modules \ помощник официанта \ Lib \ main.js: 68: 9) в новом Busboy ...

при выборе файла, вызывается функция $ scope.uploadFile ($ file) моего контроллера, вызывающая серверный сервер api с методом post. Проблема, похоже, связана с частью вызова api.

У меня есть 2 вопроса: - что я делаю неправильно? и есть ли лучший способ сделать это?

Вот как мой код выглядит следующим образом:

передний конец

HTML страницы

<label class="label-form" for="image">Upload Picture:</label> 
 
<input type="file" id="image" name="image" ngf-select="uploadFile($files)" ngf-max-size="1MB" ng-model="image" ngf-pattern="'image/*'" accept="image/*" ngf-resize="{width: 100, height: 100}" />

тогда у меня controller.js

var appControllers = angular.module('appControllers', ['ngFileUpload']); 
 

 
appControllers.controller('appUploadController',['$scope','$location','Upload', function($scope, $location, Upload){ 
 
    $scope.uploadFile = function($file) { 
 
    Upload.upload($file) 
 
     .then(function (resp) { 
 
     console.log('Success ' + resp.config.data.file.name + 'uploaded. Response: ' + resp.data); 
 
    }, function (resp) { 
 
     console.log('Error status: ' + resp.status); 
 
    }, function (evt) { 
 
     var progressPercentage = parseInt(100.0 * evt.loaded/evt.total); 
 
     console.log('progress: ' + progressPercentage + '% ' + evt.config.data.file.name); 
 
    }); 
 
    }; 
 
}]);

тогда мой service.js файл, где/производится пост апи вызов API/файлов:

вар AppServices = angular.module ('AppServices', []);

appServices.factory('Upload',['$http',function($http){ 
    return{ 
     upload : function(file){ 
      return $http.post('/api/files/', file); 
     } 
    } 
}]); 

Back-конец Теперь на серверной стороне, у меня есть свой app.js файл, файл api.js и файл конфигурации базы данных, как показано ниже:

файл api.js :

var Busboy = require('busboy'); 
 

 
app.post('/api/files',function(req,res,next){ 
 
    console.log("and the call has been successful"); 
 
    var busboy = new Busboy({ 
 
\t headers: req.headers 
 
    }); 
 

 
    busboy.on('error', function(err) { 
 
    console.log(err); 
 
    }); 
 
    
 
    busboy.on('file', function(fieldname, file, filename, encoding, mimetype) { 
 
    db.uploadFile(req.files.file.name); // call the function to use gridfs \t 
 
    }); 
 

 
    busboy.on('finish', function() { 
 
    console.log('finish'); 
 
    }); 
 
}

app.js

var express = require('express'); 
 
var path = require('path'); 
 
var bodyParser = require('body-parser'); 
 
var busboy = require('busboy'); 
 

 
var app = express(); 
 

 
var db = require('./app/config/database'); //load the config of the database mongolab 
 
db.init(app); 
 

 
// view engine setup - configure 
 
app.set('view engine', 'ejs'); 
 
app.set('views', __dirname + '/views'); 
 
    
 
// define middleware 
 
app.use(express.static(__dirname + '/views')); 
 
app.use(bodyParser.json()); // support json encoded bodies 
 
app.use(busboy()); 
 
app.use(bodyParser.urlencoded({ extended: true })); // support encoded bodies 
 
app.use(morgan('dev')); // log every request to the console 
 

 
// define routes 
 
require('./app/routes/routes')(app); 
 
require('./app/api/api')(app, db); 
 

 
app.listen(3000);

вот мой конфигурационный файл базы данных

var mongoose = require('mongoose'); //library for the mongo database 
 
var Grid = require('gridfs-stream'); 
 
var fs = require('fs'); 
 
var conn = mongoose.connection; 
 

 
exports.init = function(app) { 
 
    //connection to the mongo database 
 
    var uri ="mongodb://..."; 
 
    Grid.mongo = mongoose.mongo; 
 
    mongoose.connect(uri, {server:{auto_reconnect:true}}); 
 

 
    conn.once('open', function() { 
 
    var gfs = Grid(conn.db); 
 
    app.set('gridfs', gfs); 
 
    console.log('connection open and the mongo db URI is' +uri); 
 
    }); 
 
}; 
 

 
exports.uploadFile = function(file){ 
 
    var gfs = Grid(conn.db); 
 
    var file_name = file.name; 
 

 
    var writestream = gfs.createWriteStream({ 
 
     filename: file_name, 
 
     mode:"w", 
 
     content_type: part.mimetype 
 
    }); 
 
    
 
    fs.createReadStream(url_image).pipe(writestream); 
 
    
 
    writestream.on('close', function (file) { 
 
     console.log(file.filename + 'Written To DB'); 
 
    }); 
 
};

Answer 1

Я думаю, что проблема с именованием.Ng-file-upload используйте имя службы Update, и вы используете свою фабрику с именем Update тоже, и это проблема - вы используете фабрику для отправки файла, и это ошибка.

Вы должны использовать механизм загрузки из Ng-file-upload, поэтому удалите свою фабрику загрузки.

Ваш код будет выглядеть так же, потому что вы используете хорошее именование, вы только добавить URL-адрес параметры;)

var appControllers = angular.module('appControllers', ['ngFileUpload']); 

appControllers.controller('appUploadController',['$scope','$location','Upload', function($scope, $location, Upload){ 
    $scope.uploadFile = function($file) { 
    Upload.upload({ 
      url: 'api/files', 
      data: {file: $file} 
     }) 
     .then(function (resp) { 
     console.log('Success ' + resp.config.data.file.name + 'uploaded. Response: ' + resp.data); 
    }, function (resp) { 
     console.log('Error status: ' + resp.status); 
    }, function (evt) { 
     var progressPercentage = parseInt(100.0 * evt.loaded/evt.total); 
     console.log('progress: ' + progressPercentage + '% ' + evt.config.data.file.name); 
    }); 
    }; 
}]);