今天在学习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的值的问题。

转载于:https://www.cnblogs.com/dirkhe/p/7354886.html

node进阶| 解决表单enctype=multipart/form-data 时获取不到Input值的问题相关推荐

  1. HTML form表单添加enctype属性后获取不到input值

    HTML form表单添加enctype属性后获取不到input值 问题如图所示, 在servlet中输出获取的属性值,发现全部为null 最后结论 enctype修改了form表单提交时的格式,不再 ...

  2. form上传表单enctype属性编码值

    form表单在你不写enctype属性时,也默认为其添加了enctype属性值,默认值是enctype="application/x- www-form-urlencoded".这 ...

  3. form表单嵌套,用标签的form属性来解决表单嵌套的问题

    form表单嵌套,用标签的form属性来解决表单嵌套的问题 参考文章: (1)form表单嵌套,用标签的form属性来解决表单嵌套的问题 (2)https://www.cnblogs.com/jpfs ...

  4. layui表单提交使用form.on(‘submit(sub)‘,function (){}) 使用ajax请求时回调不执行的原因及解决方法

    layui表单提交使用form.on('submit(sub)',function (){}) 使用ajax请求时回调不执行的原因及解决方法 参考文章: (1)layui表单提交使用form.on(' ...

  5. HTML技能点--表单enctype属性解释

    点此查看全部文字教程.视频教程.源代码 本文目录 1. 用途 2. `application/x-www-form-urlencoded` 解释 3. `multipart/form-data` 解释 ...

  6. js进阶 14-8 表单序列化函数serializeArray()和serialize()的区别是什么

    js进阶 14-8 表单序列化函数serializeArray()和serialize()的区别是什么 一.总结 一句话总结:两者都是对表单进行序列化,serializeArray()返回的是json ...

  7. 解决表单提交的数据丢失问题

    解决表单提交的数据丢失问题: 一.问题描述: 当我们在给前台页面设置修改功能的时候,因为有些信息是不允许进行修改的,所以在修改表单中没有相应的修改输入框,但是在修改表单的数据提交的时候,那些不允许修改 ...

  8. 前端:JS/32/form对象(表单)(form对象的属性,方法和事件),受返回值影响的两个事件(onclick事件,onsubmit事件),获取表单的元素对象的三种方式,表单的提交和验证方法总结

    form 对象(表单) 一个<form>标记,就是一个<form>对象: 1,form对象的属性 name :表单的名称,主要用来让JS来控制表单: action :表单的数据 ...

  9. 表单中enctype=multipart/form-data的意思

    表单中enctype="multipart/form-data"的意思,是设置表单的MIME编码.默认情况,这个编码格式是application/x-www-form-urlenc ...

最新文章

  1. 博客园在微信内置浏览器打开时添加微信赞赏码功能
  2. linux下时区设置和时间同步
  3. python中的urlencode和urldecode的用法
  4. java字符串操作_Java的字符串操作
  5. 后台管理页面布局(左侧导航长度根据右侧内容无限延伸)
  6. 文件路径最好使用正斜杠,使用反斜杠可能在unix系统中访问不到文件
  7. JSF 2.2在30秒内创建一个自定义Hello World组件
  8. GCD6: 在GCD上异步执行非UI相关任务
  9. memcache 原理 监测 查看状态 stats 结构
  10. 转转集团Q4手机行情:二手市场iPhone交易量今年以来首次“反弹”
  11. 2021-07-02 swift大礼包
  12. 数学的意义与数学教育的价值
  13. 十年了,测试变了,我也变了,但总有一些东西未变
  14. Java 在PPT中添加文本水印的简易方法(单一/平铺水印)
  15. 汇编指令及其英文全称
  16. PHP 门面设计模式
  17. 亚马逊做精品选品怎么选?
  18. python android自动化元素定位_appium+python android元素定位
  19. Java集合题目练习
  20. 2021-08-19 网银互联

热门文章

  1. Bing Speech Recognition 标记
  2. 2010全面兼容IE6/IE7/IE8/FF的CSS HACK写法
  3. 探讨C#中字符串的加密
  4. 关于我曾经做过的一个商业社区的ui框架
  5. 云栖社区云栖号(团队博客)攻略【2018版】
  6. MySQL索引底层实现原理
  7. Mysql 数据库水平分表 存储过程
  8. JavaScript动画知多少?
  9. 瑞星2009:3大拦截2大防御功能主动遏制木马病毒
  10. Oracle数据库自动存储管理(ASM)