今天在学习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值的问题的更多相关文章

  1. 表单提交数据格式form data

    前言: 最近遇到的最多的问题就是表单提交数据格式问题了. 常见的三种表单提交数据格式,分别举例说明:(项目是vue的框架) 1.application/x-www-form-urlencoded 提交 ...

  2. form表单中enctype="multipart/form-data"的作用

    在我们使用php导入和导出excel表格的时候经常会见到 enctype="multipart/form-data",哪他的作用是什么呢? ENCTYPE="multip ...

  3. form表单中enctype="multipart/form-data"的传值问题

    form表单中enctype="multipart/form-data"的传值问题!! Form表单中enctype="multipart/form-data" ...

  4. 【Python全栈-后端开发】Django进阶2-Form表单

    Django进阶2-Form表单 Django的Form主要具有一下几大功能: 生成HTML标签(可以保留上次输入内容) 验证用户数据(显示错误信息) HTML Form提交保留上次提交数据 初始化页 ...

  5. 表单enctype不对导致action中无法接受数据

    表单enctype不对导致action中无法接受数据 描述:在用ssh开发项目的时候,可能会遇到一个问题, 那就是明明我的表单字段和JavaBean类中的字段都是一一对应的,而且action也实现了模 ...

  6. 表单enctype属性

    首先知道enctype这个属性管理的是表单的MIME编码.共有三个值可选:1.application/x-www-form-urlencoded2.multipart/form-data3.text/ ...

  7. 表单提交 multipart/form-data 和 x-www-form-urlencoded的区别

    表单提交表单有两种提交方式,POST和GET.通常我们会使用POST方式,一是因为形式上的安全 :二是可以上传文件. 我之前经常忽略掉表单的编码类型,觉得它特别长比较难记,而且不设置也似乎不影响什么. ...

  8. java web解决表单重复提交问题

    我们大家再进行web开发的时候,必不可少会遇见表单重复提交问题.今天就来给总结如何解决表单提交问题,欢迎大家交流指正. 首先我们在讨论如何解决表单重复提交问题之前先来解决三个问题:1.什么叫表单重复提 ...

  9. php解决表单重复提交

    php解决表单重复提交时间:2015-2-28 | 评论:1条评论 | 被查看了 189 次 | 标签:php, W3cui重复提交是我们开发中会常碰到的一个问题,除了我们使用js来防止表单的重复提交 ...

随机推荐

  1. Java中对象和对象引用的区别,引用、指向是什么意思

    Java的变量分为两大类:基本数据类型和引用数据类型. 其中基本类型变量有四类8种:byte short int long float double char boolean,除了8种基本数据类型变量 ...

  2. 救救孩子吧,到现在还搞不懂TCP的三次握手四次挥手

    本文在个人技术博客同步发布,详情可用力戳 亦可扫描屏幕右侧二维码关注个人公众号,公众号内有个人联系方式,等你来撩...   前几天发了一个朋友圈,发现暗恋已久的女生给我点了个赞,于是我当晚辗转反侧.彻 ...

  3. JS 时间获取 (常用)

    /** * 获取几天之前日期 */ daysAgo(dayNum = 0) { let myDate = new Date() let lw = new Date(myDate - 1000 * 60 ...

  4. Linux之lldptool工具

    1. 描述当我们想在操作系统里面查看网口和交换机连接的状态信息,我们可以使用lldptool这个工具2.LLDP协议LLDP是Link Layer Discovery Protocol 链路层发现协议 ...

  5. MySQL数据库根据一个或多个字段查询重复数据

    系统在开发测试过程中出现bug,比如并发操作没有处理好,数据库中往往会插入重复数据,这些脏数据经常会导致各种问题.bug可以修改,但是数据往往也要处理,处理SQL如下: 1.根据一个字段查找重复数据 ...

  6. 多线程std::cout 深入研究

    1.研究背景 在测试时发现mingw版本的gcc编译出来的程序,一个主程序新建20个线程,每个线程都循环向cout输出信息,几分钟程序就崩了,而用msvc和gcc-linaro版gcc交叉编译器编译出 ...

  7. Golang | 简介channel常见用法,完成goroutin通信

    今天是golang专题的第14篇文章,大家可以点击上方的专辑回顾之前的内容. 今天我们来看看golang当中另一个很重要的概念--信道.我们之前介绍goroutine的时候曾经提过一个问题,当我们启动 ...

  8. 记录一次mybatis缓存和事务传播行为导致ut挂的排查过程

    起因 rhea项目有两个ut一直都是挂的,之前也经过几个同事排查过,但是都没有找到解决办法,慢慢的这个问题就搁置了.因为之前负责rhea项目的同事离职,我临时接手了这个项目,刚好最近来了一个新同事在做 ...

  9. 良许被百万大V安排得服服帖帖,还跟美女小姐姐合影了……

    大家好,我是良许. 很多人问我说,良许,你在工作之余还花这么多时间精力去写公众号运营自媒体,到底是为了什么? 其实原因很简单,就是想做个副业,万一到了 35 岁真的失业了,我至少还有另外一份收入,不至 ...

  10. Vue-router的用法与使用步骤

    Vue-router的使用步骤: Vue Router的使用步骤还是比较清晰的,按照步骤一步一步就能完成路由操作 A.导入js文件 B.添加路由链接 C.添加路由占位符(最后路由展示的组件就会在占位符 ...