概述

node.js在处理客户端以POST方式提交的数据时，比较复杂，要写两个监听（data、end），并且要处理上传的图片、文件时也比较艰难
常用第三方模块包formidable来处理客户端以POST方式提交的表单、文件、图片等

使用GitHub使用文档

安装npm install formidable
引入const formidable = require('formidable');
在服务器端引入formidableconst formidable = require('formidable');

let form = new formidable.IncomingForm();

② 指定文件上传文件夹

form.uploadDir = path.join(__dirname, 'dir');

③ 指定文件后缀是否保存

form.keepExtensions = true;

④ 解析request发送过来的数据

form.parse(req, function (err, fields, files) {if (err) {throw err;}console.log(fields);console.log(files);res.end('success');
});

使用注意

表单提交的过程中涉及文件或者图片上传，则一定要设置表单头，即在form标签上加属性为enctype="multipart/form-data",否则文件或图片会上传时效
< input type=“file” name=“uploadImg”>，当中的name属性一定要赋值
前端传递数据的时候，不可以使用序列化，要是用new FormData($form[0]),
前端发起ajax请求的时候，不要将数据处理转化成一个查询字符串processData: false,
前段发起ajax请求的时候，不要设置请求头contentType:false

案例

前端界面
index2.ejs

<!doctype html>
<html lang="zh-cn">
<head><meta charset="UTF-8"><meta name="viewport"content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title></title>
</head>
<body>
<form action="/" method="post" enctype="multipart/form-data"><label>时间：<input type="text" name="l_name"></label><br><label>地点：<input type="text" name="l_address"></label><br><label>人物：<input type="file" name="l_person"></label><br><input id="btn_sub" type="button" value="提交">
</form>
<script src="node_modules/jquery/dist/jquery.js"></script>
<script>$('#btn_sub').on('click', function () {var $form = $('form');$.ajax({url: $form.attr('action'),type: $form.attr('method'),data: new FormData($form[0]),// 不要处理转化成一个查询字符串processData: false,contentType: false,success: function (data) {console.log(data);}})});
</script>
</body>
</html>

服务器代码

const express = require('express');
const path = require('path');
const fs = require('fs');
const formidable = require('formidable');const app = express();app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'ejs');app.use('/node_modules', express.static(path.join(__dirname, '/node_modules')));app.get('/', (req, res, next) => {res.render('index2');
});app.post('/', (req, res, next) => {// 1. 创建实例let form = new formidable.IncomingForm();// 2. 指定文件的上传文件夹form.uploadDir = path.join(__dirname, 'dir');// 3. 指定文件的后缀form.keepExtensions = true;// 4. 解析request发送过来的数据form.parse(req, function (err, fields, files) {if (err) {throw err;}console.log(fields);console.log(files);res.end('success');});
});app.listen(2000, () => {console.log('running!')
});

Node.js：借助formidable文件上传相关推荐

node.js学习笔记 - 文件上传(并用七牛云托管)
文章目录环境搭建准备工作安装相关依赖代码实现执行环境搭建准备工作提示:本文采用ts来构建环境,要是以js构建则取掉类型定义即可. 初始化项目创建目录fileUpload-demo- ...
js插件---IUpload文件上传插件（包括图片）
js插件---IUpload文件上传插件(包括图片) 一.总结一句话总结:上传插件找到真正上传位置的代码,这样就可以知道整个上传插件的逻辑了, 找资料还是github+官方 1.如何在js中找到真正 ...
基于js管理大文件上传以及断点续传
大厂技术高级前端 Node进阶点击上方程序员成长指北,关注公众号回复1,加入高级Node交流群前言前端小伙伴们平常在开发过程中文件上传是经常遇到的一个问题,也许你能够实现相关的功能,但 ...
AjaxUpLoad.js使用实现文件上传
AjaxUpLoad.js的使用实现无刷新文件上传,如图. 图1 文件上传前图2 文件上传后 1.创建页面并编写HTML 上传文档: <div class="uploadFile&q ...
Js中清空文件上传字段(input type=file )
表单中type=file字段的value属性无法由js来附值,一但选中某个文件后,如果用户不手动去清空那么这个值将保留,提交表单时对应文件也会被提交上去.当然在服务器上会再次验证,不过为了避免上 ...
js可以控制文件上传的速度吗？
为了减轻服务器负载,对于上传和下载的情况,我们需要进行流量控制,一般的方法是服务端做限流举措,比如很多ftp服务器,但是我想是不是可以使用前端js做呢? 顺着这个想法,我查了下资料,目前来看结论是No ...
node使用express+multer文件上传和下载的问题
简单使用multer实现文件的上传和下载: 1.文件上传使用multer,首先要在项目中安装multer模块. npm install multer -save 2.这里使用express模块,mul ...
java spring js文件_005-html+js+spring multipart文件上传
一.概述需求:通过html+js+java上传最大500M的文件,需要做MD5 消息摘要以及SHA256签名,文件上传至云存储 1.1.理解http协议 https://www.cnblogs.co ...
JS：关于断点续传插件 Resumable.js 中的文件上传控制问题
官方文档:http://www.resumablejs.com/ 它是一个JavaScript库,通过HTML5 File API提供多个同步,稳定和可恢复的上传. 该库旨在通过HTTP将容错引入上传 ...
原生JS实现HTML文件上传,HTML5 js实现拖拉上传文件功能
在HTML5的pc上面实现了相当多的功能,工作中也用到了拖拉上传,特地记录下该功能在拖动目标上触发事件 (源元素): ondragstart - 用户开始拖动元素时触发 ondrag - 元素正在拖 ...

Node.js：借助formidable文件上传

概述

使用GitHub使用文档

使用注意

案例

Node.js：借助formidable文件上传相关推荐

最新文章

热门文章