[英]Upload file using ng-file-upload and mongo gridfs
我想將超過16MB的文件上傳到數據庫Mongo。 在前端部分,我使用ng-file-upload模塊( https://github.com/danialfarid/ng-file-upload )。 在后端,我使用connect-busboy和gridfs-stream模塊
我收到以下錯誤: POST / api / files / 500 3.084 ms-1992錯誤:不支持的內容類型:application / json; charset = utf-8在Busboy.parseHeaders(C:... \\ node_modules \\ busboy \\ lib \\ main .js:68:9)在新的Busboy上...
選擇文件后,將調用控制器的$ scope.uploadFile($ file)函數,該函數使用post方法調用后端服務器api。 問題似乎在api調用部分。
我有兩個問題:-我做錯了什么? 有更好的方法嗎?
我的代碼如下所示:
前端
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 / files /進行了api調用:
var appServices = angular.module('appServices',[]);
appServices.factory('Upload',['$http',function($http){
return{
upload : function(file){
return $http.post('/api/files/', file);
}
}
}]);
后端現在在后端,我有我的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({ 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 }); 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'); }); };
我認為命名有問題。 Ng-file-upload使用服務名稱Update,並且您也使用名稱為Update的工廠,這是一個問題-您使用工廠發送文件,這是一個錯誤。
您應該從Ng-file-upload中使用上傳機制,因此請刪除您的Upload Factory。
您的代碼將看起來一樣,因為使用了良好的命名,所以只添加了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);
});
};
}]);
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.