JS FormData上传文件的设置方法


Posted in Javascript onJuly 05, 2017

使用FormData上传文件时,总是获取不到req.file对象。发现是没有配置对FormData导致。

这里我是在vue中使用axios发送的请求,配置代码如下。重点地方给出注释

<form id="uploadform" method="POST" enctype="multipart/form-data" :action="postImgApi" ref="uploadform">
 <input type="file" name="imagefile" @change="upload" ref="inputfile">
</form>
let uploadform = this.$refs.uploadform
let inputfile = this.$refs.inputfile
let formData = new FormData(uploadform) //初始化时将form Dom对象传入
formData.append('imagefile', inputfile) //将imagefile键追加进去,值为input-file的dom对象,否则服务端无法获取file
this.$http.post(this.postImgApi, formData, {
 headers: {
  'Content-Type': 'multipart/form-data' //设置post文件的请求头
 }
}).then(res => {
 debugger
 this.textarea = res.data
})

这两天也是从网上找了各种demo和资料,发现使用自己的请求是后台就是获取不到文件,而使用form表单的submit却是可以。最开始分析是否是自己的请求头的问题,发现content-type正确且带有boundary,content-length也正常,说明请求头这里应该是没问题的。所以从FormData这里入手,几次尝试后寻找到上面代码的方式可以正常运行。这里后面有时间还是要详细分析下FormData,好好学习下在给出深度的解释。

以上所述是小编给大家介绍的JS FormData上传文件的设置方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
JavaScript 原型学习总结
Oct 29 Javascript
JavaScript 计算图片加载数量的代码
Jan 01 Javascript
Array, Array Constructor, for in loop, typeof, instanceOf
Sep 13 Javascript
Js 时间函数getYear()的使用问题探讨
Apr 01 Javascript
结合JQ1.9通过js正则判断各种浏览器版本的方法
Dec 30 Javascript
Extjs 4.x 得到form CheckBox 复选框的值
May 04 Javascript
JavaScript实现的GBK、UTF8字符串实际长度计算函数
Aug 27 Javascript
jQuery实现简单的日期输入格式化控件
Mar 12 Javascript
简单谈谈gulp-changed插件
Feb 21 Javascript
H5实现中奖记录逐行滚动切换效果
Mar 13 Javascript
详解Angular6学习笔记之主从组件
Sep 05 Javascript
介绍一下28个JS常用数组方法
May 06 Javascript
JS实现unicode和UTF-8之间的互相转换互转
Jul 05 #Javascript
js 获取元素的具体样式信息getcss(实例讲解)
Jul 05 #Javascript
Angular 2父子组件数据传递之@Input和@Output详解(下)
Jul 05 #Javascript
使用prop解决一个checkbox选中后再次选中失效的问题
Jul 05 #Javascript
JS鼠标滚动分页效果示例
Jul 05 #Javascript
jQuery实现返回顶部按钮和scroll滚动功能[带动画效果]
Jul 05 #jQuery
Angular 2父子组件数据传递之@Input和@Output详解 (上)
Jul 05 #Javascript
You might like
PHP在Web开发领域的优势
2006/10/09 PHP
phpMyAdmin 安装及问题总结
2009/05/28 PHP
PHP对象Object的概念 介绍
2012/06/14 PHP
CodeIgniter删除和设置Cookie的方法
2015/04/07 PHP
以文件形式缓存php变量的方法
2015/06/26 PHP
chrome浏览器不支持onmouseleave事件的解决技巧
2013/05/31 Javascript
简单实用jquery版三级联动select示例
2013/07/04 Javascript
jquery 新建的元素事件绑定问题解决方案
2014/06/12 Javascript
超棒的响应式布局jQuery插件Freetile.js
2014/11/17 Javascript
JavaScript判断变量是否为空的自定义函数分享
2015/01/31 Javascript
如何使用headjs来管理和异步加载js
2016/11/29 Javascript
Html中 IFrame的用法及注意点
2016/12/22 Javascript
js实现简单的手风琴效果
2017/02/27 Javascript
IScroll那些事_当内容不足时下拉刷新的解决方法
2017/07/18 Javascript
React如何避免重渲染
2018/04/10 Javascript
jQuery 点击获取验证码按钮及倒计时功能
2018/09/20 jQuery
vue-router实现嵌套路由的讲解
2019/01/19 Javascript
Element-ui DatePicker显示周数的方法示例
2019/07/19 Javascript
详解JavaScript 浮点数运算的精度问题
2019/07/23 Javascript
解决layer图标icon不加载的问题
2019/09/04 Javascript
微信小程序仿抖音视频之整屏上下切换功能的实现代码
2020/05/24 Javascript
教你学会使用Python正则表达式
2017/09/07 Python
Python 数据库操作 SQLAlchemy的示例代码
2019/02/18 Python
python中hasattr()、getattr()、setattr()函数的使用
2019/08/16 Python
Python编程快速上手——疯狂填词程序实现方法分析
2020/02/29 Python
pytorch快速搭建神经网络_Sequential操作
2020/06/17 Python
python一些性能分析的技巧
2020/08/30 Python
Python urlopen()参数代码示例解析
2020/12/10 Python
python 实现的车牌识别项目
2021/01/25 Python
HTML5实现无刷新修改URL的方法
2019/11/14 HTML / CSS
关于逃课的检讨书
2014/01/23 职场文书
优秀求职信范文分享
2014/01/26 职场文书
小学优秀班集体申报材料
2014/05/25 职场文书
社会工作专业求职信
2014/07/15 职场文书
同学聚会通知短信
2015/04/20 职场文书
navicat 连接Ubuntu虚拟机的mysql的操作方法
2022/04/02 MySQL