图片上传之FileAPI与NodeJs
HTML5之fileAPI
HTML5之fileAPI使得我们处理图片上传更加简单。
实例
html代码
<div class="form-group"><label for="modal_inputFile" class="col-md-3 control-label label-font">位置图:</label><div class="col-md-9"><input type="text" readonly="" class="form-control" placeholder="点击选择文件"><input type="file" id="modal_inputFile"><img src="" class="img-responsive" id="modal-pre" alt="预览区" style="max-height: 300px"></div>
</div>
效果:
这里我们可以通过$("#modal_inputFile")[0].files[0]
来获取到图片的信息。
这里有name
,size
,type
这几个我们常用的属性。
实现预览
选择好图片后,我们都希望会有个预览功能。这个html5也为我们想到了。
他提供了FileReader这个新的对象给我们。
FileReader该接口主要用来把文件读入内存,并且读取文件中的数据。
这样我们就可以通过date url来实现预览了。
var file = document.getElementById(modal_inputFile'').files[0];if (!file) {return false;}var reader = new FileReader();reader.readAsDataURL(file);reader.onload = function(e) {var ib_pre = document.getElementById('modal-pre');ib_pre.src = this.result;
}
这样就实现了预览。
我们再来查看下img的src。
<img src="https://img-blog.csdnimg.cn/2022010615370942466.png" class="img-responsive" id="modal-pre" alt="预览区" style="max-height: 300px">
src是base64编码。
具体可见:HTML5权威指南--标签新变化,文件API,拖放API(简要学习笔记一)
与后台对接
既然前端使用文件API能满足我们的需求,那我们接下来就需要上传到服务端了。当仁不让的就是NodeJs了。
前端请求
下面是前端发起请求的例子:
//图片上传
$('#preUpload').on('click', function(e) {var data = new FormData();var _files = $("#modal_inputFile")[0].files[0];var ect = ($("#modal_inputFile")[0].files[0]).name.split('.')[1];if(ect !== 'png'){alert('请上传png图片!')return;}data.append("modal_file", _files);$.ajax({type: 'post',dataType: 'json',url: window.stnt_hosts + 'thirdAdmanage/upload/modal',data: data,contentType: false,processData: false}).done(function(data, status) {console.log('上传成功');}).fail(function(err) {console.log('上传失败');})
})
这里通过FormData来处理我们需要上传的数据。
这里的data数据是一个序列过的对象。后台接受就行了。
后端处理
服务端我们使用node-formidable来处理图片的保存等操作。
见代码:
var formidable = require("formidable");
var form = new formidable.IncomingForm();//临时目录
form.uploadDir = './upload/';//预览图片上传
router.post('/upload/modal', function(req, res, next) {form.parse(req, function(err, fields, files) {if (files.modal_file) {rename(files.modal_file.path, files.modal_file.name, 'preview')res.send({stats:'success',data:[]})}})
});function rename(old, _new, code, bId) {var path = './upload/' + code + '/';fs.exists(path, function(exists) {if (!exists) {fs.mkdir(path)console.log('创建文件夹!')}fs.renameSync(old, path + _new, function(err) {if (err) {console.log(err);return;}console.log('上传成功!')})})
}
这里使用fs.renameSync
的原因是,我们里面设置的临时目录form.uploadDir是存在于内存中的数据,并不是真正的图片。
类似这样
我们需要通过fs的方法,将文件重新保存到我们需要的地方即可。这时候就是图片了。
最后
这里的form.parse(req, function(err, fields, files)
中的fields
与files
到底是什么对象,一定要自己调试着看。看完你就明白是什么了。
之前我不清楚的时候就是打开浏览器就搜索,结果可想而知很惨,几乎全是错的。
所以不清楚的话一定要去查github。
还有app.use(bodyParser.urlencoded({ extended: true }));
的作用是用来解析我们通常的form表单提交的数据,也就是请求头中包含这样的信息: Content-Type: application/x-www-form-urlencoded
app.use(bodyParser.json())
是用来解析json的。
具体关于bodyParser的见这位博友的文章bodyParser中间件的研究。
图片上传之FileAPI与NodeJs相关推荐
- 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接口进件前需要先在商户资料中的身份证照片和门店照片通过 ...
- nodeJs中间件Multer详解_使用express实现本地文件/图片上传到服务器指定目录
最终实现的效果,更改Input的值后,将图片显示出来.输入描述信息,提交后,图片上传到后台对应的路径下. Multer Multer 是一个node.js中间件,用于处理 multipart/form ...
最新文章
- NTU 课程笔记:MAS714(9) 动态规划
- MyBatis使用resultMap自定义映射规则与关联映射
- (三)通用视图(generic views)
- MySQL 数据还原
- mysql 无符号 负数_mysql下有符号数和无符号数的相关问题
- 如何解决python 图表中文显示乱码问题(matlplotlib 包)
- python第一周作业--------模拟登录
- 给android应用程序系统的签名
- 【大云制造】大云运营管理平台V1.4发布——不忘初心,砥砺前行,为了创造无限的价值!...
- win10 安装VB6详细安装教程及其中的坑
- Tkinter教程(每天半小时,3天彻底掌握Tkinter)day1
- javascript颜色选择器
- iOS人脸识别 用苹果api<AVFoundation/AVFoundation.h>
- 商务统计_3 概率论基础 2
- 怎么电脑计算机管理员去掉,电脑每次运行程序都要管理员身份怎么办?
- 清除hao123浏览器劫持小尾巴病毒
- codeblock的c语言编译,CodeBlocks无法编译的原因和解决办法
- wps转换成word如何实现?不妨试试这两个小技巧
- 使用System.setOut()
- Android框架之路——Banner实现轮播图(RecyclerView添加Header)
热门文章
- myeclipse:web项目不能显示Web App Libraries
- Sublime Text 2 和 Verilog HDL
- 【UEditor】关于导入ueditor-1.1.3.jar的问题---
- SQL 服务器勒索病毒XTBL、dharma、wallet后缀,会在文件名中添加联系的电子邮件地址...
- “九头虫”病毒技术分析报告
- 大规模集群自动化部署SSH无密码登陆
- BurpSuite的使用总结
- Eclipse SDK 4.2.2/Equinox 3.8.2 发布
- groovy 慢_groovy优化
- Segment Routing — SRv6 — TE 流量工程