这篇文章主要介绍node如何实现图片上传,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!
在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');})
8三行setHeader尤其重要,这是后端跨域的精髓!
添加上传进度
这个也是我们常用的,并且所希望看到的!这会给用户极好的体验感。
我们只要在上面代码中添加:
form.on('progress',(bytesReceived,bytesExpected)=>{var precent=Math.floor(bytesReceived/bytesExpected*100);console.log(precent);})
然后把这个进度传回到用户的浏览器中去,即可。
formidable
formidable模块实现了上传和编码图片和视频。它支持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如何实现图片上传”这篇文章的所有内容,感谢各位的阅读!希望分享的内容对大家有帮助,更多相关知识,欢迎关注编程网行业资讯频道!