你有很多方法和工具来实现你想要的.我把其中一个放在这里:
对于这个我使用angular-file-upload作为客户端.所以你需要这个控制器中的一个:
$scope.onFileSelect = function(image) { if (angular.isArray(image)) { image = image[0]; } // This is how I handle file types in client side if (image.type !== 'image/png' && image.type !== 'image/jpeg') { alert('Only PNG and JPEG are accepted.'); return; } $scope.uploadInProgress = true; $scope.uploadProgress = 0; $scope.upload = $upload.upload({ url: '/upload/image',method: 'POST',file: image }).progress(function(event) { $scope.uploadProgress = Math.floor(event.loaded / event.total); $scope.$apply(); }).success(function(data,status,headers,config) { $scope.uploadInProgress = false; // If you need uploaded file immediately $scope.uploadedImage = JSON.parse(data); }).error(function(err) { $scope.uploadInProgress = false; console.log('Error uploading file: ' + err.message || err); }); };
并在您的视图中的以下代码(我还添加了现代浏览器的文件类型处理程序):
Upload image <input type="file" data-ng-file-select="onFileSelect($files)" accept="image/png,image/jpeg"> <span data-ng-if="uploadInProgress">Upload progress: {{ uploadProgress }}</span> <img data-ng-src="uploadedImage" data-ng-if="uploadedImage">
对于服务器端,我使用node-multiparty.
这就是您在服务器端路由中需要的:
app.route('/upload/image') .post(upload.postImage);
并在服务器端控制器中:
var uuid = require('node-uuid'),multiparty = require('multiparty'),fs = require('fs'); exports.postImage = function(req,res) { var form = new multiparty.Form(); form.parse(req,function(err,fields,files) { var file = files.file[0]; var contentType = file.headers['content-type']; var tmpPath = file.path; var extIndex = tmpPath.lastIndexOf('.'); var extension = (extIndex < 0) ? '' : tmpPath.substr(extIndex); // uuid is for generating unique filenames. var fileName = uuid.v4() + extension; var destPath = 'path/to/where/you/want/to/store/your/files/' + fileName; // Server side file type checker. if (contentType !== 'image/png' && contentType !== 'image/jpeg') { fs.unlink(tmpPath); return res.status(400).send('Unsupported file type.'); } fs.rename(tmpPath,destPath,function(err) { if (err) { return res.status(400).send('Image is not saved:'); } return res.json(destPath); }); }); };
正如你所看到的,我将上传的文件存储在文件系统中,所以我只是使用node-uuid给他们唯一的名字.如果要将文件直接存储在数据库中,则不需要uuid,在这种情况下,只需使用缓冲区数据类型.还请照顾像角度模块依赖关系中添加angularFileUpload这样的东西.