浅谈node实现图片上传的方法-js教程-PHP中文网

前端部分

后端部分

添加上传进度

formidable

首页

web前端

js教程

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

青灯夜游

Mar 05, 2021 am 10:02 AM

node 图片上传文件上传

本篇文章给大家介绍一下node实现图片文件上传的方法。有一定的参考价值，有需要的朋友可以参考一下，希望对大家有所帮助。

浅谈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);
	})

登录后复制

然后把这个进度传回到用户的浏览器中去，即可。

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实现图片上传的方法的详细内容。更多信息请关注PHP中文网其他相关文章！

本站声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

热AI工具

Undresser.AI Undress

人工智能驱动的应用程序，用于创建逼真的裸体照片

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

免费脱衣服图片

Clothoff.io

AI脱衣机

Video Face Swap

使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸！

显示更多

热工具

记事本++7.3.1

好用且免费的代码编辑器

SublimeText3汉化版

中文版，非常好用

禅工作室 13.0.1

功能强大的PHP集成开发环境

Dreamweaver CS6

视觉化网页开发工具

SublimeText3 Mac版

神级代码编辑软件(SublimeText3)

显示更多

热门话题

gmail邮箱登陆入口在哪里

7695

Java教程

1640

CakePHP 教程

1393

Laravel 教程

1287

PHP教程

1229

显示更多

Related knowledge

实现Workerman文档中的文件上传与下载 Nov 08, 2023 pm 06:02 PM

实现Workerman文档中的文件上传与下载，需要具体代码示例引言：Workerman是一款高性能的PHP异步网络通讯框架，具备简洁、高效、易用等特点。在实际开发中，文件上传和下载是常见的功能需求，本文将介绍如何使用Workerman框架实现文件的上传和下载，并给出具体的代码示例。一、文件上传：文件上传是指将本地计算机上的文件传输至服务器端的操作。下面是使用

如何利用Laravel实现文件上传和下载功能 Nov 02, 2023 pm 04:36 PM

如何利用Laravel实现文件上传和下载功能Laravel是一个流行的PHPWeb框架，提供了丰富的功能和工具，使得开发Web应用程序更加简单和高效。其中一个常用的功能就是文件上传和下载。本文将介绍如何利用Laravel实现文件上传和下载功能，并提供具体的代码示例。文件上传文件上传是指将本地的文件上传到服务器上保存。在Laravel中，我们可以使用文件上传

如何解决Java文件上传异常（FileUploadException） Aug 18, 2023 pm 12:11 PM

如何解决Java文件上传异常（FileUploadException）上传文件在Web开发中经常会遇到的一个问题是FileUploadException（文件上传异常）。它可能会由于各种原因而出现，例如文件大小超过限制、文件格式不匹配或者服务器配置不正确等。本文将介绍一些解决这些问题的方法，并提供相应的代码示例。限制上传文件的大小在大多数场景下，限制文件大小

如何在 Golang 中使用 gRPC 实现文件上传？ Jun 03, 2024 pm 04:54 PM

如何使用gRPC实现文件上传？创建配套服务定义，包括请求和响应消息。在客户端，打开要上传的文件并将其分成块，然后通过gRPC流流式传输发送到服务端。在服务端，接收文件块并将其存储到文件中。服务端在文件上传完成后发送响应，指示上传是否成功。

Laravel中的文件上传和处理：管理用户上传的文件 Aug 13, 2023 pm 06:45 PM

Laravel中的文件上传和处理：管理用户上传的文件引言：在现代Web应用程序中，文件上传是很常见的功能需求。在Laravel框架中，文件上传和处理变得非常简单和高效。本文将介绍如何在Laravel中管理用户上传的文件，包括文件上传的验证、存储、处理和显示。一、文件上传文件上传是指将文件从客户端上传到服务器端。在Laravel中，文件上传非常容易处理。首先，

微信小程序实现图片上传功能 Nov 21, 2023 am 09:08 AM

微信小程序实现图片上传功能随着移动互联网的发展，微信小程序已经成为了人们生活中不可或缺的一部分。微信小程序不仅提供了丰富的应用场景，还支持开发者自定义功能，其中包括图片上传功能。本文将介绍如何在微信小程序中实现图片上传功能，并提供具体的代码示例。一、前期准备工作在开始编写代码之前，我们需要先下载并安装微信开发者工具，并注册成为微信开发者。同时，还需要了解微信

Pi Node教学：什么是Pi节点？如何安装和设定Pi Node？ Mar 05, 2025 pm 05:57 PM

PiNetwork节点详解及安装指南本文将详细介绍PiNetwork生态系统中的关键角色——Pi节点，并提供安装和配置的完整步骤。Pi节点在PiNetwork区块链测试网推出后，成为众多先锋积极参与测试的重要环节，为即将到来的主网发布做准备。如果您还不了解PiNetwork，请参考Pi币是什么？上市价格多少？Pi用途、挖矿及安全性分析。什么是PiNetwork？PiNetwork项目始于2019年，拥有其专属加密货币Pi币。该项目旨在创建一个人人可参与

如何用PHP实现FTP文件上传进度条 Jul 30, 2023 pm 06:51 PM

如何用PHP实现FTP文件上传进度条一、背景介绍在网站开发中，文件上传是一个常见的功能。而对于大文件的上传，为了提高用户体验，我们常常需要给用户显示一个上传进度条，让用户知道文件上传的进程。本文将介绍如何使用PHP实现FTP文件上传进度条的功能。二、FTP文件上传进度条的实现方法基本思路FTP文件上传的进度条实现，通常是通过计算上传的文件大小和已上传文件大小

See all articles

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

前端部分

后端部分

添加上传进度

formidable

热AI工具

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

Video Face Swap

热门文章

热工具

记事本++7.3.1

SublimeText3汉化版

禅工作室 13.0.1

Dreamweaver CS6

SublimeText3 Mac版

热门话题