我使用众所周知的angular-file-upload.js
模块上传文件。
在这个例子中:
'use strict';
angular
.module('app', ['angularFileUpload'])
.controller('AppController', ['$scope', 'FileUploader', function($scope, FileUploader) {
var uploader = $scope.uploader = new FileUploader({
url: 'upload.php'
});
// FILTERS
uploader.filters.push({
name: 'imageFilter',
fn: function(item /*{File|FileLikeObject}*/, options) {
var type = '|' + item.type.slice(item.type.lastIndexOf('/') + 1) + '|';
return '|jpg|png|jpeg|bmp|gif|'.indexOf(type) !== -1;
}
});
// CALLBACKS
uploader.onWhenAddingFileFailed = function(item /*{File|FileLikeObject}*/, filter, options) {
console.info('onWhenAddingFileFailed', item, filter, options);
};
uploader.onAfterAddingFile = function(fileItem) {
console.info('onAfterAddingFile', fileItem);
};
uploader.onAfterAddingAll = function(addedFileItems) {
console.info('onAfterAddingAll', addedFileItems);
};
uploader.onBeforeUploadItem = function(item) {
console.info('onBeforeUploadItem', item);
};
uploader.onProgressItem = function(fileItem, progress) {
console.info('onProgressItem', fileItem, progress);
};
uploader.onProgressAll = function(progress) {
console.info('onProgressAll', progress);
};
uploader.onSuccessItem = function(fileItem, response, status, headers) {
console.info('onSuccessItem', fileItem, response, status, headers);
};
uploader.onErrorItem = function(fileItem, response, status, headers) {
console.info('onErrorItem', fileItem, response, status, headers);
};
uploader.onCancelItem = function(fileItem, response, status, headers) {
console.info('onCancelItem', fileItem, response, status, headers);
};
uploader.onCompleteItem = function(fileItem, response, status, headers) {
console.info('onCompleteItem', fileItem, response, status, headers);
};
uploader.onCompleteAll = function() {
console.info('onCompleteAll');
};
console.info('uploader', uploader);
}]);
这行代码url: 'upload.php'
向一些php
文件发送请求。
而不是php
我使用node.js
。
为了使其工作,我创建了一些app.js
文件:
app.post('/loadFiles', function (request, response) {
response.send(200, { result: "ok" });
});
并将控制器的代码更改为url: '/loadFiles'
。
我可以看到正在调用此路由,但我不知道如何从request
获取图像。
经过几个小时的谷歌搜索,在我看来,我应该以某种方式将图像编码到item
控制器上的uploader.onBeforeUploadItem
事件上(然后以某种方式解码服务器端的图像)但我没有设法找到一个完整的例子,并决定寻求你的帮助。
请指出服务器端(或控制器端)代码是什么,以便将图像从用户的浏览器传递到服务器?
谢谢!
答案 0 :(得分:0)
好的,这就是我想到的:
uploader.onBeforeUploadItem
内无需做任何事。
我需要做的就是进入服务器端的文件:
app.post('/loadFiles', multipartyMiddleware, function (req, res) {
var file = req.files.file;
console.log(file.name);
console.log(file.type);
console.log(file.path);
res.send(200, { result: "ok" });
});
var multiparty = require('connect-multiparty'),
multipartyMiddleware = multiparty();