您的位置是:网站首页>Javascript编程Javascript编程

浅谈node实现图片上传的方法

少儿编程网2021-11-25 13:55:08Javascript编程 人已围观 来源:少儿编程 -用户投稿

简介本篇文章给大家介绍一下node实现图片文件上传的方法。有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。相关推荐:《nodejs教程》在web开发中,文件上传是一个很重要的问题,尤其是图片上传,以及由此延伸的“进度条”、“文件大小”、以及著名的“跨域”等问题。本demo演示的是图片的上

本篇文章给大家介绍一下node实现图片文件上传的方法。有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。XRa少儿编程网-https://www.pxcodes.com

XRa少儿编程网-https://www.pxcodes.com

相关推荐:《nodejs 教程》XRa少儿编程网-https://www.pxcodes.com

在web开发中,文件上传是一个很重要的问题,尤其是图片上传,以及由此延伸的“进度条”、“文件大小”、以及著名的“跨域”等问题。XRa少儿编程网-https://www.pxcodes.com

本demo演示的是图片的上传,服务器代码为node。XRa少儿编程网-https://www.pxcodes.com

前端部分

<!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),但这里我想了想。还是采用 后端设置跨域 的方式。XRa少儿编程网-https://www.pxcodes.com

后端部分

这是本文要介绍的重点,为了用高效流畅的方式来解析文件上传请求,我们先引入formidable库:XRa少儿编程网-https://www.pxcodes.com

npm install formidable --save

formidable的流式解析器让它成为了处理文件上传的绝佳选择,也就是说它能随着数据块的上传接收它们,解析它们,并吐出特定的部分,相信熟悉流的朋友会很好理解。这种方式不仅快,还不会因为需要大量缓冲而导致内存膨胀,即便像视频这种大型文件,也不会把进程压垮。
当然,我们要创建myImage文件,用于存放上传的图片,接着,我们创建一个IncomingForm实例form,并且设置存放路径为myImage文件夹。代码如下:XRa少儿编程网-https://www.pxcodes.com

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尤其重要,这是后端跨域的精髓!XRa少儿编程网-https://www.pxcodes.com

添加上传进度

这个也是我们常用的,并且所希望看到的!这会给用户极好的体验感。
我们只要在上面代码中添加:XRa少儿编程网-https://www.pxcodes.com

	form.on('progress',(bytesReceived,bytesExpected)=>{
		var precent=Math.floor(bytesReceived/bytesExpected*100);
		console.log(precent);
	})

然后把这个进度传回到用户的浏览器中去,即可。XRa少儿编程网-https://www.pxcodes.com

formidable

formidable模块实现了上传和编码图片和视频。它支持GB级上传数据处理,支持多种客户端数据提交。有极高的测试覆盖率,非常适合在生产环境中使用。
formidable模块的方法和属性 —— 围绕: Formidable.incomingForm()XRa少儿编程网-https://www.pxcodes.com

可以通过该方法创建一个form表单:XRa少儿编程网-https://www.pxcodes.com

var form = new formidable.IncomingForm();

通过encoding属性设置字段编码XRa少儿编程网-https://www.pxcodes.com

form.encoding='utf-8';

通过uploadDir设置上传文件时临时文件存放的位置,默认上传的临时文件存放的位置为os.tmpDir();XRa少儿编程网-https://www.pxcodes.com

form.uploadDir='/tmp/';

通过keepExtensions属性可以设置文件上传时临时文件的文件名是否包括扩展名。如果该值为真,即为包括扩展名,否则,就不包括扩展名。XRa少儿编程网-https://www.pxcodes.com

form.keepExtensions=false

还有比较重要的“ parse方法 ”:解析node.js中request请求中包含的form表单提交的数据。cb为处理请求的回调函数(不必须)。XRa少儿编程网-https://www.pxcodes.com

form.parse(req,function(err,fields,files){
    //...
});

更多编程相关知识,请访问:编程视频!!

以上就是浅谈node实现图片上传的方法的详细内容,更多请关注少儿编程网其它相关文章!XRa少儿编程网-https://www.pxcodes.com

来源:php中文网XRa少儿编程网-https://www.pxcodes.com


相关文章:

支持一下 ( )

浅谈node实现图片上传的方法

      匿名评论
    • 评论
    人参与,条评论
    浅谈node实现图片上传的方法

微信公众号

免费视频教程

先知道