1.插件

? (1) ：angular插件 ng-file-upload

? (2) : nodejs插件connect-multiparty

?

2.html

<input type="file" ?ngf-select ng-model="files" ngf-multiple="true" />

3.配置

var app = angular.module('fileUpload', ['ngFileUpload']);
可以參考https://github.com/danialfarid/ng-file-upload 1 //inject angular file upload directives and services. 2 var app = angular.module('fileUpload', ['ngFileUpload']); 3 4 app.controller('MyCtrl', ['$scope', 'Upload', function ($scope, Upload) { 5 $scope.$watch('files', function () { 6 $scope.upload($scope.files); 7 }); 8 // set default directive values 9 // Upload.setDefaults( {ngf-keep:false ngf-accept:'image/*', ...} ); 10 $scope.upload = function (files) { 11 if (files && files.length) { 12 for (var i = 0; i < files.length; i++) { 13 var file = files[i]; 14 Upload.upload({ 15 url: 'url', //此處url為向后臺nodejs請求的路由 16 fields: {'username': $scope.username}, 17 file: file 18 }).progress(function (evt) { 19 var progressPercentage = parseInt(100.0 * evt.loaded / evt.total); 20 console.log('progress: ' + progressPercentage + '% ' + evt.config.file.name); 21 }).success(function (data, status, headers, config) { 22 console.log('file ' + config.file.name + 'uploaded. Response: ' + data); 23 }).error(function (data, status, headers, config) { 24 console.log('error status: ' + status); 25 }) 26 } 27 } 28 }; 29 }]);

?

4.nodejs

后臺接收的數據是存在于臨時文件夾內。因此使用fs.rename()有肯能會報錯。（我這邊是確確實實報錯了）

1 var multipart = require('connect-multiparty'); 2 var fs = require('fs'); 3 var multipartMiddleware = multipart(); 4 5 6 7 8 9 10 //此處'/url'應與angular發送的路由一致， 11 router.post('/url', multipartMiddleware,function(req, res, next){ 12 13 var profile_image = req.files.file; 14 var tmp_path = profile_image.path; //此處為頁面圖片存放的地址，在C盤的臨時文件夾temp下。 15 console.log(req.files); 16 var path = './url' + profile_image.name; //此處'./url'為上傳的圖片希望存放的地址.可以為絕對地址 17 18 //跨域傳遞文件 19 var is = fs.createReadStream(tmp_path); 20 var os = fs.createWriteStream(path); 21 is.pipe(os); 22 is.on('end',function() { 23 fs.unlinkSync(tmp_path); 24 }); 25 //跨域傳遞文件 26 //-----------此處可以寫點傳遞回前臺的數據 --------此處不完整，不能完全照搬。如果寫全的話，太麻煩。 27 });

?

? ? ?從最開始的不懂，到后面逐漸把坑填滿，花費了太多時間。里面的坑著實不少，能走通一次后，回頭再看，代碼量就那么點。寫一下我犯過的錯誤吧.

? ? 1.插件版本錯誤。之前的插件貌似叫做angular-file-upload.悲催的我拿著ng-file-upload，卻用angular-file-upload的寫法。

? ? 2.angular-file-upload需要在用到的congtroller加載'$upload'，而ng-file-upload加載'Upload'.

? ? 3.angular-file-upload加載中間件的名稱是['angularFileUpload'],而ng-file-upload加載['ngFileUpload']

? ? 4.nodejs接收不到 req.files.file.一個原因是nodejs插件選擇有問題,還有一個原因是插件的寫法有問題.個人傾向于使用connect-multiparty.

? ? 5.nodejs的fs.rename()方法報錯。猜測：因為上傳的圖片存在于C盤的臨時文件夾內，可能涉及到系統權限的問題導致fs.rename()方法報錯。所以，從網上搜了一個跨域讀取文件的方法。

?

轉載于:https://www.cnblogs.com/maduar/p/4700683.html

總結

以上是生活随笔為你收集整理的Angularjs+Nodejs图片上传的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。