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 相关文章推荐
JS中剪贴板兼容性、判断复制成功或失败
Mar 09 Javascript
Javascript 日期处理之时区问题
Oct 08 Javascript
基于jquery的DIV随滚动条滚动而滚动的代码
Jul 20 Javascript
jQuery实现图片信息的浮动显示实例代码
Aug 28 Javascript
window.open 以post方式传递参数示例代码
Feb 27 Javascript
深入理解JavaScript中的箭头函数
Jul 28 Javascript
跟我学习javascript的函数调用和构造函数调用
Nov 16 Javascript
HTML中使背景图片自适应浏览器大小实例详解
Apr 06 Javascript
angular4自定义组件非input元素实现ngModel双向数据绑定的方法
Dec 28 Javascript
浅入深出Vue之自动化路由
Aug 06 Javascript
node.js域名解析实现方法详解
Nov 05 Javascript
vue实现商城秒杀倒计时功能
Dec 12 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 Class&amp;Object -- PHP 自排序二叉树的深入解析
2013/06/25 PHP
php中的Base62类(适用于数值转字符串)
2013/08/12 PHP
PHP正则替换函数preg_replace()报错:Notice Use of undefined constant的解决方法分析
2017/02/04 PHP
jQuery中的.bind()、.live()和.delegate()之间区别分析
2011/06/08 Javascript
使用apply方法处理数组的三个技巧[译]
2012/09/20 Javascript
extjs ColumnChart设置不同的颜色实现代码
2013/05/17 Javascript
jquery获取复选框被选中的值
2014/03/22 Javascript
js判断是否按下了Shift键的方法
2015/01/27 Javascript
node.js下LDAP查询实例分享
2015/09/30 Javascript
JQuery实现的按钮倒计时效果
2015/12/23 Javascript
js判断当前页面用什么浏览器打开的方法
2016/01/06 Javascript
jQuery实现TAB选项卡切换特效简单演示
2016/03/04 Javascript
简单总结JavaScript中的String字符串类型
2016/05/26 Javascript
全面解析Bootstrap中scrollspy(滚动监听)的使用方法
2016/06/06 Javascript
js滚轮事件兼容性问题需要注意哪些
2016/11/15 Javascript
如何使用JS在HTML中自定义字符串格式化
2017/07/20 Javascript
React Native 集成jpush-react-native的示例代码
2017/08/16 Javascript
AngularJS select设置默认值的实现方法
2017/08/25 Javascript
Vue2.0基于vue-cli+webpack同级组件之间的通信教程(推荐)
2017/09/14 Javascript
H5+C3+JS实现双人对战五子棋游戏(UI篇)
2020/05/28 Javascript
如何去除富文本中的html标签及vue、react、微信小程序中的过滤器
2018/11/21 Javascript
layer弹出子iframe层父子页面传值的实现方法
2018/11/22 Javascript
微信小程序使用字体图标的方法
2019/05/23 Javascript
vue登录注册实例详解
2019/09/14 Javascript
JavaScript工具库MyTools详解
2020/01/01 Javascript
vue实现编辑器键盘抬起时内容跟随光标距顶位置向上滚动效果
2020/05/28 Javascript
Vue+Vant 图片上传加显示的案例
2020/11/03 Javascript
python实现数通设备tftp备份配置文件示例
2014/04/02 Python
详解Django框架中用context来解析模板的方法
2015/07/20 Python
Python对Excel按列值筛选并拆分表格到多个文件的代码
2019/11/05 Python
python json load json 数据后出现乱序的解决方案
2020/02/27 Python
python 基于UDP协议套接字通信的实现
2021/01/22 Python
英国著名的茶叶品牌:Whittard of Chelsea
2016/09/22 全球购物
财务工作个人求职的自我评价
2013/12/19 职场文书
python 如何在 Matplotlib 中绘制垂直线
2021/04/02 Python
Android Gradle 插件自定义Plugin实现注意事项
2022/06/16 Java/Android