相关推荐：《nodejs 教程》
在web开发中，文件上传是一个很重要的问题，尤其是图片上传，以及由此延伸的“进度条”、“文件大小”、以及著名的“跨域”等问题。
本demo演示的是图片的上传，服务器代码为node。
前端部分<!doctype html><html><head> <meta charset="utf-8"> <title>title</title> <script src="https://unpkg.com/axios/dist/axios.min.js"></script></head><body> <input type="file" name="file" accept="image/*" onchange="changeimg(event)"/> <button onclick="submit()">上传</button> <script> let file = '' let filename = '' function submit() { let data = new formdata() data.append('imgname', filename) data.append('img', file) axios({ method: 'post', timeout: 2000, url: 'http://localhost:8081/postapi', data: data }) .then(response => { console.log(response.data) }) .catch(error => { console.log(error) }) } function changeimg(e) { file = e.target.files.item(0) //只能选择一张图片 // 如果不选择图片 if (file === null) { return } filename = file.name } </script></body></html>
采用axios发送请求 —— 其实我们这里也可以采用另一种“跨域请求方式”（vue-resource），但这里我想了想。还是采用 后端设置跨域 的方式。
后端部分这是本文要介绍的重点，为了用高效流畅的方式来解析文件上传请求，我们先引入formidable库：
npm install formidable --save
formidable的流式解析器让它成为了处理文件上传的绝佳选择，也就是说它能随着数据块的上传接收它们，解析它们，并吐出特定的部分，相信熟悉流的朋友会很好理解。这种方式不仅快，还不会因为需要大量缓冲而导致内存膨胀，即便像视频这种大型文件，也不会把进程压垮。
当然，我们要创建myimage文件，用于存放上传的图片，接着，我们创建一个incomingform实例form，并且设置存放路径为myimage文件夹。代码如下：
const http=require('http');const formidable=require('formidable');var server=http.createserver(function(req,res){ // 后端设置跨域 res.setheader('access-control-allow-origin','*'); res.setheader('access-control-allow-headers','content-type'); res.setheader('content-type','application/json'); switch(req.method){ case 'options': res.statuscode=200; res.end(); break; case 'post': upload(req,res); break; }})function upload(req,res){ if(!isformdata(req)){ res.statuscode=400; res.end('请求错误,请使用multipart/form-data格式'); return; } var form=new formidable.incomingform(); // 设置上传图片保存文件 form.uploaddir='./myimage'; form.keepextensions=true; form.on('field',(field,value)=>{ console.log(field); console.log(value); }) form.on('end',()=>{ res.end('上传完成!'); }) form.parse(req);}function isformdata(req){ let type=req.headers['content-type'] || ''; return type.includes('multipart/form-data');}server.listen(8081,function(){ console.log('port is on 8081');})
6、7、8三行setheader尤其重要，这是后端跨域的精髓！
添加上传进度这个也是我们常用的，并且所希望看到的！这会给用户极好的体验感。
我们只要在上面代码中添加：
form.on('progress',(bytesreceived,bytesexpected)=>{ var precent=math.floor(bytesreceived/bytesexpected*100); console.log(precent); })
然后把这个进度传回到用户的浏览器中去，即可。
formidableformidable模块实现了上传和编码图片和视频。它支持gb级上传数据处理，支持多种客户端数据提交。有极高的测试覆盖率，非常适合在生产环境中使用。
formidable模块的方法和属性 —— 围绕：formidable.incomingform()
可以通过该方法创建一个form表单：
var form = new formidable.incomingform()；
通过encoding属性设置字段编码
form.encoding='utf-8';
通过uploaddir设置上传文件时临时文件存放的位置，默认上传的临时文件存放的位置为os.tmpdir();
form.uploaddir='/tmp/';
通过keepextensions属性可以设置文件上传时临时文件的文件名是否包括扩展名。如果该值为真，即为包括扩展名，否则，就不包括扩展名。
form.keepextensions=false
还有比较重要的“ parse方法 ”：解析node.js中request请求中包含的form表单提交的数据。cb为处理请求的回调函数（不必须）。
form.parse(req,function(err,fields,files){ //...});
更多编程相关知识，请访问：编程视频！！
以上就是浅谈node实现图片上传的方法的详细内容。