今天在学习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从入门到失业》第一章:计算机基础知识(三):程序语言简介

    1.3程序语言简介 我们经常会听到一些名词:低级语言.高级语言.编译型.解释型.面向过程.面向对象等.这些到底是啥意思呢?在正式进入Java世界前,笔者也尝试简单的聊一聊这块东西. 1.3.1低级语言 ...

  2. 这都Java15了,Java7特性还没整明白?

    「MoreThanJava」 宣扬的是 「学习,不止 CODE」,本系列 Java 基础教程是自己在结合各方面的知识之后,对 Java 基础的一个总回顾,旨在 「帮助新朋友快速高质量的学习」. 当然 ...

  3. unity探索者之socket传输protobuf字节流(三)

    版权声明:本文为原创文章,转载请声明http://www.cnblogs.com/unityExplorer/p/6986474.html 上一篇讲到了数据的处理,这一篇主要讲使用多线程收发消息 // ...

  4. JAVA使用urlrewrite实现伪静态化

    什么是伪静态? 伪静态字面理解就是假的静态,说的官方点就是“地址重写,用户得到的全部地址都是经过处理后的URL地址”. 为什么要伪静态呢? 提高安全性,可以有效的避免一些参数名.ID等完全暴露在用户面 ...

  5. Vue生命周期,我奶奶看了都懂了

    最近一直在学习Vue,而vue生命周期是我们不可能绕开的一个很核心的知识点,今天来简单的梳理一下大概的内容. 一.钩子函数 在一开始学习的时候,总有钩子函数这个名词冒出来,而且在vue官网文档中也频繁 ...

  6. Vue中keep-alive组件的理解

    对keep-alive组件的理解 当在组件之间切换的时候,有时会想保持这些组件的状态,以避免反复重渲染导致的性能等问题,使用<keep-alive>包裹动态组件时,会缓存不活动的组件实例, ...

  7. 第7篇 Scrum 冲刺博客

    1.站立会议 照骗 进度 成员 昨日完成任务 今日计划任务 遇到的困难 钟智锋 确定客户端和服务器通信的形式 重新设计项目执行流程 庄诗楷 编写UI的基本图形和响应 编写客户端UI 易德康 马,车,炮 ...

  8. CefSharp如何判断页面是否加载完

    问题:CefSharp如何判断页面是否加载完毕. 摘要:相信C#用CefSharp做浏览器来发的应该有很多人都会有遇到这个问题.特别是要执行JavaScript的时候,涉及到跨页面的JavaScrip ...

  9. Resharper 2020 免费破解版

    如果你是一名.NET开发人员,但是你却不使用ReSharper,那么你就不是一个合格的码农了,因为这是一个强大的神器,你值得拥有!当然,用它的代价是,启动VS会变得非常慢,非常卡,但是需要知道,磨刀不 ...

  10. LuaProfiler

    Lua Profiler机制的源码解析 https://www.jianshu.com/p/f6606b27e9de