Angularjs+Nodejs图片上传
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图片上传相关推荐
- 图片上传之FileAPI与NodeJs
HTML5之fileAPI HTML5之fileAPI使得我们处理图片上传更加简单. 实例 html代码 <div class="form-group"><lab ...
- nodejs+express整合kindEditor实现图片上传
为什么80%的码农都做不了架构师?>>> kindEditor官网上中提供了ASP,ASP.NET,JSP相关的整合应用,http://kindeditor.net/docs/ ...
- c ajax 上传图片,ajax +NodeJS 实现图片上传实例
前台用jquery的ajax发请求,后台用NodeJS 的multer模块实现图片上传.这个demo给我的感悟是一定要自己能实现出来,而不是看了别人写好就直接"拿来"用 note( ...
- nodejs+express整合kindEditor实现图片上传 - 木子丰咪咕晶 - 开源中国
kindEditor官网上中提供了ASP,ASP.NET,JSP相关的整合应用,http://kindeditor.net/docs/upload.html可以参照实现nodejs的整合,发现实用no ...
- 一步一步搭建一个图片上传网站(后台服务器用nodejs)
前几天看了腾讯云社区的一个文件上传的文章 <文件上传那些事儿> ,大体上讲了以下h5中图片上传的几个核心原理,但是没有后端接受的服务器代码,没法做测试.也没有具体的一个实例都是一些基本的原 ...
- nodejs+express+mysql实现图片上传
nodejs+express+multer+ajax上传图片到服务器端,以及将图片路径保存到数据库 思路,使用nodejs中的express框架搭建好服务器,创建上传图片的路由,在工作目录中划分好服务 ...
- 一步一步搭建一个图片上传网站(后台服务器用nodejs) 1
前几天看了腾讯云社区的一个文件上传的文章文件上传那些事儿,大体上讲了以下h5中图片上传的几个核心原理,但是没有后端接受的服务器代码,没法做测试.也没有具体的一个实例都是一些基本的原理片段,并且ui界面 ...
- formidable ajax上传,nodejs+express+ajax实现图片上传及显示
图片上传: 页面aja中比需抖接朋功要朋插x写法 var data = new FormData(); var files = $("#idFile")[0].files; if( ...
- nodejs微信支付小微商户申请入驻时,如何实现图片上传接口
微信支付小微商户可以通过小程序<微信买单服务商助手>来进件,也可以通过API接口来进件(详情可查阅小微商户专属接口文档). 通过API接口进件前需要先在商户资料中的身份证照片和门店照片通过 ...
最新文章
- zuul 启动 threw exception_SpringCloud-Zuul-网关路由过滤器
- 请与计算机管理员联系,电脑的限制被取消,请与管理员联系 解决方案
- win 安装Polygon
- maven 工程mybatis自动生成实体类
- Python语言 目录
- leetcode514. 自由之路(dp)
- 邮件发送类_10 分钟实现 Spring Boot 发生邮件功能
- Tail Recursion尾递归
- Bailian2855 计算概论(刘志敏老师班)ACM测试题1【椭圆】
- 关于使用easyui dataGrid遇到的小bug问题
- macOS中LaTeX报错Package fontspec Error: The font “SimHei“ cannot be found
- Docker 学习笔记
- 美团架构师谈论程序员进阶架构师所需能力模型
- 一米村长讲故事机器人_主持人李锐推出“村长讲故事”APP,已入驻喜马拉雅
- CAD工具——图纸剪切
- Doris开启Stream Load记录
- Android手机导出的已安装的APK到电脑
- 郭德纲相声里的插入广告
- 中国医科大学网络教育计算机应用基础试题,作业与试题选集1906 中国医科大学《计算机应用基础 》复习题.docx...
- kaggle 共享单车项目数据分析和单车租赁数预测
热门文章
- python 打印xml文档树_[Python]xml.etree.ElementTree处理xml文档
- java 如何跟多个字符串比较_Stack Overflow上370万浏览量的一个问题:如何比较Java的字符串...
- 计算机对口高考文化试卷,计算机对口高考模拟试卷
- php修改mysql数据找不到_php 如何修改mysql数据
- java调用hbase_Java调用Hbase
- python自定义函数func_python自定义函数与面向对象
- ❤️六W字《计算机基础知识》(八)(建议收藏)❤️
- printdocument python_python学习笔记之wxpython打印预览
- StringBuffer和StringBuild
- php变量原格式输出,PHP格式化输出打印变量