node进阶| 解决表单enctype="multipart/form-data" 时获取不到Input值的问题
今天在学习node踩到一个坑:form设置enctype="multipart/form-data"上传文件时,无法获取到表单其他input的值。
因为之前上传文件用的是 formidable
方法1:formidable (无法获取其他input的值)
引包 app.js
var app = express();
var express = require("express");
var router = require("./controller"); //前端MVC的C 一个顶层变量

controller/package.json
{
"main" :"router.js"
}
POST请求 app.js:
app.post("/file_upload",router.uploadfile);
controller/router:
exports.uploadfile=function(req,res){
// console.log(req.route);
var form = new formidable.IncomingForm();
form.encoding = 'utf-8';
form.uploadDir = "./uploads"; //上传路径
form.parse(req, function(err, fields, files) { // 表单上传到东西在fields 文件在files里面
//更改文件名
var timeStr = (Math.floor(Math.random()*9000+1000)).toString();
var d = sd.format(new Date(),'YYYYMMDDHHmmss'+timeStr);
var folder = fields.folder;
var extname = path.extname(files.file.name); //文件类型
var oldName = files.file.path;
var newName = "./public/image/"+folder+"/"+d + extname;
console.log(newName);
console.log(folder);
fs.rename(oldName,newName);
//成功页
res.send("<a href = '/'>返回</a>");
});
}
views/up.ejs
<form style="width:40%;" method="post" action="/file_upload" enctype="multipart/form-data">
<input type="file" id="exampleInputFile" name="file">
<input type="submit" class="btn btn-default">上传</input>
</form>
但是这种方法无法获取到form表单其他input的值
方法2:multer(可以获取)
引包 app.js
var express = require('express');
var path = require('path');
var index = require('./routes/index');
var fs = require('fs');
var multer = require('multer');

app.js
app.use('/', index);
var storage = multer.diskStorage({
destination: function (req, file, cb) {
cb(null, './uploads') //设定文件上传路径
},
//给上传文件重命名,获取添加后缀名
filename: function (req, file, cb) {
console.log(file.originalname) //上传文件的名字
console.log(file.mimetype) //上传文件的类型
console.log(file.fieldname) // 上传文件的Input的name名
console.log(file.encoding) // 编码方式
var fileFormat = (file.originalname).split("."); //采用分割字符串,来获取文件类型
console.log(fileFormat)
var extname = path.extname(file.originalname); //path下自带方法去获取文件类型
console.log(extname);
// cb(null, file.fieldname + '-' + Date.now() + "." + fileFormat[fileFormat.length - 1]); //更改名字
cb(null, file.fieldname + '-' + Date.now() + extname); //更改名字
}
});
var upload = multer ({storage:storage}) //定制化上传参数
app.post('/upload', upload.array('logo',2), function(req, res, next){
console.log(req.body.txt)
res.send({ret_code: '0'});
});
views/index.ejs
<form action="/upload" method="post" enctype="multipart/form-data">
<h2>单图上传</h2>
<input type="file" name="logo">
<input type="file" name="logo">
<input type="text" name="txt">
<input type="submit" value="提交">
</form>
multer包成功解决了无法获取到表单其他input的值的问题。
node进阶| 解决表单enctype="multipart/form-data" 时获取不到Input值的问题的更多相关文章
- 表单提交数据格式form data
前言: 最近遇到的最多的问题就是表单提交数据格式问题了. 常见的三种表单提交数据格式,分别举例说明:(项目是vue的框架) 1.application/x-www-form-urlencoded 提交 ...
- form表单中enctype="multipart/form-data"的作用
在我们使用php导入和导出excel表格的时候经常会见到 enctype="multipart/form-data",哪他的作用是什么呢? ENCTYPE="multip ...
- form表单中enctype="multipart/form-data"的传值问题
form表单中enctype="multipart/form-data"的传值问题!! Form表单中enctype="multipart/form-data" ...
- 【Python全栈-后端开发】Django进阶2-Form表单
Django进阶2-Form表单 Django的Form主要具有一下几大功能: 生成HTML标签(可以保留上次输入内容) 验证用户数据(显示错误信息) HTML Form提交保留上次提交数据 初始化页 ...
- 表单enctype不对导致action中无法接受数据
表单enctype不对导致action中无法接受数据 描述:在用ssh开发项目的时候,可能会遇到一个问题, 那就是明明我的表单字段和JavaBean类中的字段都是一一对应的,而且action也实现了模 ...
- 表单enctype属性
首先知道enctype这个属性管理的是表单的MIME编码.共有三个值可选:1.application/x-www-form-urlencoded2.multipart/form-data3.text/ ...
- 表单提交 multipart/form-data 和 x-www-form-urlencoded的区别
表单提交表单有两种提交方式,POST和GET.通常我们会使用POST方式,一是因为形式上的安全 :二是可以上传文件. 我之前经常忽略掉表单的编码类型,觉得它特别长比较难记,而且不设置也似乎不影响什么. ...
- java web解决表单重复提交问题
我们大家再进行web开发的时候,必不可少会遇见表单重复提交问题.今天就来给总结如何解决表单提交问题,欢迎大家交流指正. 首先我们在讨论如何解决表单重复提交问题之前先来解决三个问题:1.什么叫表单重复提 ...
- php解决表单重复提交
php解决表单重复提交时间:2015-2-28 | 评论:1条评论 | 被查看了 189 次 | 标签:php, W3cui重复提交是我们开发中会常碰到的一个问题,除了我们使用js来防止表单的重复提交 ...
随机推荐
- 在UOS 上部署 django + uwsgi + nginx 流程
前言:这篇主要是流程,不喜勿喷,虽然我知道在部署过程中 参照博客写的越详细越好. 强大的百度会解决一切的 爬了诸多坑 ,心累,必须总结!! 最近 芯片封锁闹的很凶 支持国产!! UOS 统一操作系统 ...
- 机器学习 | 详解GBDT在分类场景中的应用原理与公式推导
本文始发于个人公众号:TechFlow,原创不易,求个关注 今天是机器学习专题的第31篇文章,我们一起继续来聊聊GBDT模型. 在上一篇文章当中,我们学习了GBDT这个模型在回归问题当中的原理.GBD ...
- chromium 源码下载地址
下载链接:https://gsdview.appspot.com/chromium-browser-official/
- 第七篇 Scrum冲刺博客
一.会议图片 二.任务完成情况 成员 已完成 冯荣新 博客撰写 陈泽佳 自定义图片组件,提交功能 徐伟浩 协助前端获取数据 谢佳余 搜索算法设计 邓帆涛 意见反馈 三.部分代码 <tabs ta ...
- 企业网站SEO如何选择关键词
http://www.wocaoseo.com/thread-17-1-1.html 企业网站的关键词应该如何去选择?有很多的企业老板在网上某某企业在网上做了一个网站,一天盈利多少后,觉得 ...
- “大地主”IPv6的地址实验配置
上一篇文章,我们简单的介绍了一下IPv6协议的邻居发现BD和简单的基础配置,这里我们通过实验观察一下 IPv6邻居发现中会发送的报文,顺便熟悉一下,新的地址配置 根据拓扑图配置地址 这里原理和IPv4 ...
- 基于Appium的UI自动化测试
为什么需要UI自动化测试 移动端APP是一个复杂的系统,不同功能之间耦合性很强,很难仅通过单元测试保障整体功能.UI测试是移动应用开发中重要的一环,但是执行速度较慢,有很多重复工作量,为了减少这些工作 ...
- 万字长文,Python数据分析实战,使用Pandas进行数据分析
文章目录 很多人学习python,不知道从何学起.很多人学习python,掌握了基本语法过后,不知道在哪里寻找案例上手.很多已经做案例的人,却不知道如何去学习更加高深的知识.那么针对这三类人,我给大家 ...
- iOS NSNotification通知
通知中心(NSNotificationCenter) 通知(NSNotification) 一个完整的通知一般包含3个属性:(注意顺序) - (NSString *)name; 通知的名称 - (i ...
- Fitness - 05.22
终于到了连续熬夜,感觉身心俱疲的年纪了. 今天休息一天,瑜伽暂停. 调整作息时间,12点睡觉,5点起床学习~