nodejs图片上传
nodejs平常开辟网站基础都用express框架，本文也重要以express为例，解说怎样上传图片；
express自身没有上传图片功用；平常都是集成响应的模块；经常使用的有multer中间件和formidable中间件，前一个我设置的时刻老是失足，所以pass；此处重要演示formidable的用法；
起首前端页面设置，不过两种，
-表单提交；
-ajax提交；
表单提交代码以下：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<form action="/uploader" method="post" enctype="multipart/form-data">
<!--注重此处的name和后端files的属性对应-->
<input type="file" name="fulAvatar">
<input type="submit">
</form>
</body>
</html>这里注重表单的enctype属性肯定假如：multipart/form-data；<input type="file" name="fulAvatar">别忘了name属性;
这是html文档的解说：
定义和用法
enctype 属性规定在发送到服务器之前应当怎样对表单数据举行编码。
默许地，表单数据会编码为 “application/x-www-form-urlencoded”。就是说，在发送到服务器之前，一切字符都邑举行编码（空格转换为 “+” 加号，特殊符号转换为 ASCII HEX 值）。
ajax提交:
<!DOCTYPE>
<html>
<head>
<title> formdata file jquery ajax upload</title>
</head>
<body>
<img id="showImg" src="" alt="">
<form role="form" id="myForm" action="http://v0.api.upyun.com/xxx" method="post" enctype="multipart/form-data">
<input type="hidden" name="policy" value="">
<input type="hidden" name="signature" value="">
<div class="form-group">
<label class="col-sm-2 control-label">申明:</label>
<div class="col-sm-10">
<p class="form-control-static ">ajax 文件上传 。</p>
</div>
</div>
<div class="form-group">
<label for="url" class="col-sm-2 control-label"><s>*</s>图片挑选:</label>
<div class="col-sm-7">
<input type="file" name="fulAvatar" id="file_upload" value=""
class="form-control" placeholder="图片地点" onchange="uploadByForm();">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-7">
<a id="btnAjax" onclick=>Ajax上传</a>
</div>
</div>
</form>
<script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript">
/**
* ajax 上传。
*/
function uploadByForm() {
//用form 表单直接 组织formData 对象; 就不须要下面的append 方法来为表单举行赋值了。
var formData = new FormData($("#myForm")[0]);
var url = "http://localhost:3000/uploader";
$.ajax({
url: url,
type: 'POST',
data: formData,
/**
* 必需false才会避开jQuery对 formdata 的默许处置惩罚
* XMLHttpRequest会对 formdata 举行准确的处置惩罚
*/
processData: false,
/**
*必需false才会自动加上准确的Content-Type
*/
contentType: false,
success: function (responseStr) {
alert(responseStr.newPath);
$("img").attr({"src": responseStr.newPath}).prependTo($("body"));
},
error: function (responseStr) {
alert(responseStr.newPath);
}
});
}
</script>
</body>
</html>ajax上传重要用的是Jquery;这一块只是晓得这么用；设置ajax的时刻processData与contentType都设置为false；
另有此处用了HTML5的一个新特征;FormData;
用法以下：new FormData($("#myForm")[0]);
关于ajax这一块我做了个尝试,就是不必html5的FormData，而是直接用$(“file_upload”).val()去取文件表单的值，然后经由过程ajax通报，效果不是很抱负;
将这坨数据传到后端就能够了；
前端页面演示完了；下面是后端代码演示：
var express = require('express');
var router = express.Router();
var formidable = require('formidable'),
fs = require('fs'),
TITLE = 'formidable上传示例',
AVATAR_UPLOAD_FOLDER = '/avatar/',
domain = "http://localhost:3000";
/* 图片上传路由 */
router.post('/uploader', function(req, res) {
var form = new formidable.IncomingForm(); //建立上传表单
form.encoding = 'utf-8'; //设置编辑
form.uploadDir = 'public' + AVATAR_UPLOAD_FOLDER; //设置上传目次
form.keepExtensions = true; //保留后缀
form.maxFieldsSize = 2 * 1024 * 1024; //文件大小
form.parse(req, function(err, fields, files) {
if (err) {
res.locals.error = err;
res.render('index', { title: TITLE });
return;
}
console.log(files);
var extName = ''; //后缀名
switch (files.fulAvatar.type) {
case 'image/pjpeg':
extName = 'jpg';
break;
case 'image/jpeg':
extName = 'jpg';
break;
case 'image/png':
extName = 'png';
break;
case 'image/x-png':
extName = 'png';
break;
}
if(extName.length == 0){
res.locals.error = '只支撑png和jpg花样图片';
res.render('index', { title: TITLE });
return;
}
var avatarName = Math.random() + '.' + extName;
//图片写入地点；
var newPath = form.uploadDir + avatarName;
//显现地点；
var showUrl = domain + AVATAR_UPLOAD_FOLDER + avatarName;
console.log("newPath",newPath);
fs.renameSync(files.fulAvatar.path, newPath); //重命名
res.json({
"newPath":showUrl
});
});
});
module.exports = router;图片传到后端实在就是一段2进制字符串，保留在内存中，须要用到fs模块读取后再写入到新的目次；打印files
{ fulAvatar:
File {
domain: null,
_events: {},
_eventsCount: 0,
_maxListeners: undefined,
size: 106836,
path: 'public/avatar/upload_d75420a381af12d19db01599fd2d0b73.jpeg',
name: 'line.jpeg',
type: 'image/jpeg',
hash: null,
lastModifiedDate: 2016-12-19T15:22:47.896Z,
_writeStream:
WriteStream {
_writableState: [Object],
writable: false,
domain: null,
_events: {},
_eventsCount: 0,
_maxListeners: undefined,
path: 'public/avatar/upload_d75420a381af12d19db01599fd2d0b73.jpeg',
fd: null,
flags: 'w',
mode: 438,
start: undefined,
autoClose: true,
pos: undefined,
bytesWritten: 106836,
closed: true } } }以上数据用fs模块读取path属性获得是就是一段2进制的字符串；
注：假如不设置express中间件，express是不能取到上传的文件的，这一块在路由回调函数的req上没有做处置惩罚。
以上的示例基础就完成一些基础功用了；
迷惑就是网上一些jquery插件上传图片应用ajax，他们的原来是声明呢 ？愿望有人给诠释下
找到一篇类似的文章：
补充：
var formData = new FormData();
var fileObj = document.getElementById("file_upload").files[0];
formData.append("fulAvatar", fileObj);formData的两种用法一种是直接将表单dom直接塞进去，另有一种就是经由过程append填进去，然则这里要注重，填进去的是name和dom的files[0]属性；
