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图片上传相关推荐

  1. 图片上传之FileAPI与NodeJs

    HTML5之fileAPI HTML5之fileAPI使得我们处理图片上传更加简单. 实例 html代码 <div class="form-group"><lab ...

  2. nodejs+express整合kindEditor实现图片上传

    为什么80%的码农都做不了架构师?>>>    kindEditor官网上中提供了ASP,ASP.NET,JSP相关的整合应用,http://kindeditor.net/docs/ ...

  3. c ajax 上传图片,ajax +NodeJS 实现图片上传实例

    前台用jquery的ajax发请求,后台用NodeJS 的multer模块实现图片上传.这个demo给我的感悟是一定要自己能实现出来,而不是看了别人写好就直接"拿来"用 note( ...

  4. nodejs+express整合kindEditor实现图片上传 - 木子丰咪咕晶 - 开源中国

    kindEditor官网上中提供了ASP,ASP.NET,JSP相关的整合应用,http://kindeditor.net/docs/upload.html可以参照实现nodejs的整合,发现实用no ...

  5. 一步一步搭建一个图片上传网站(后台服务器用nodejs)

    前几天看了腾讯云社区的一个文件上传的文章 <文件上传那些事儿> ,大体上讲了以下h5中图片上传的几个核心原理,但是没有后端接受的服务器代码,没法做测试.也没有具体的一个实例都是一些基本的原 ...

  6. nodejs+express+mysql实现图片上传

    nodejs+express+multer+ajax上传图片到服务器端,以及将图片路径保存到数据库 思路,使用nodejs中的express框架搭建好服务器,创建上传图片的路由,在工作目录中划分好服务 ...

  7. 一步一步搭建一个图片上传网站(后台服务器用nodejs) 1

    前几天看了腾讯云社区的一个文件上传的文章文件上传那些事儿,大体上讲了以下h5中图片上传的几个核心原理,但是没有后端接受的服务器代码,没法做测试.也没有具体的一个实例都是一些基本的原理片段,并且ui界面 ...

  8. formidable ajax上传,nodejs+express+ajax实现图片上传及显示

    图片上传: 页面aja中比需抖接朋功要朋插x写法 var data = new FormData(); var files = $("#idFile")[0].files; if( ...

  9. nodejs微信支付小微商户申请入驻时,如何实现图片上传接口

    微信支付小微商户可以通过小程序<微信买单服务商助手>来进件,也可以通过API接口来进件(详情可查阅小微商户专属接口文档). 通过API接口进件前需要先在商户资料中的身份证照片和门店照片通过 ...

最新文章

  1. zuul 启动 threw exception_SpringCloud-Zuul-网关路由过滤器
  2. 请与计算机管理员联系,电脑的限制被取消,请与管理员联系 解决方案
  3. win 安装Polygon
  4. maven 工程mybatis自动生成实体类
  5. Python语言 目录
  6. leetcode514. 自由之路(dp)
  7. 邮件发送类_10 分钟实现 Spring Boot 发生邮件功能
  8. Tail Recursion尾递归
  9. Bailian2855 计算概论(刘志敏老师班)ACM测试题1【椭圆】
  10. 关于使用easyui dataGrid遇到的小bug问题
  11. macOS中LaTeX报错Package fontspec Error: The font “SimHei“ cannot be found
  12. Docker 学习笔记
  13. 美团架构师谈论程序员进阶架构师所需能力模型
  14. 一米村长讲故事机器人_主持人李锐推出“村长讲故事”APP,已入驻喜马拉雅
  15. CAD工具——图纸剪切
  16. Doris开启Stream Load记录
  17. Android手机导出的已安装的APK到电脑
  18. 郭德纲相声里的插入广告
  19. 中国医科大学网络教育计算机应用基础试题,作业与试题选集1906 中国医科大学《计算机应用基础 》复习题.docx...
  20. kaggle 共享单车项目数据分析和单车租赁数预测

热门文章

  1. python 打印xml文档树_[Python]xml.etree.ElementTree处理xml文档
  2. java 如何跟多个字符串比较_Stack Overflow上370万浏览量的一个问题:如何比较Java的字符串...
  3. 计算机对口高考文化试卷,计算机对口高考模拟试卷
  4. php修改mysql数据找不到_php 如何修改mysql数据
  5. java调用hbase_Java调用Hbase
  6. python自定义函数func_python自定义函数与面向对象
  7. ❤️六W字《计算机基础知识》(八)(建议收藏)❤️
  8. printdocument python_python学习笔记之wxpython打印预览
  9. StringBuffer和StringBuild
  10. php变量原格式输出,PHP格式化输出打印变量