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工具函数代码
Feb 17 Javascript
js动态创建、删除表格示例代码
Aug 07 Javascript
JS实现鼠标单击与双击事件共存
Mar 08 Javascript
深入理解JavaScript的React框架的原理
Jul 02 Javascript
JavaScript Ajax实现异步通信
Dec 14 Javascript
self.attachevent is not a function的解决方法
Apr 04 Javascript
jQuery无冲突模式详解
Jan 17 jQuery
利用JavaScript将Excel转换为JSON示例代码
Jun 14 Javascript
webpack打包html里面img后src为“[object Module]”问题
Dec 22 Javascript
vue使用map代替Aarry数组循环遍历的方法
Apr 30 Javascript
vue中使用腾讯云Im的示例
Oct 23 Javascript
Vue ECharts实现机舱座位选择展示功能
May 15 Vue.js
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
从一个不错的留言本弄的mysql数据库操作类
2007/09/02 PHP
深入解析PHP的引用计数机制
2013/06/14 PHP
PHP+Mysql基于事务处理实现转账功能的方法
2015/07/08 PHP
PHP实现批量上传单个文件
2015/12/29 PHP
PHP最常用的正则表达式
2017/02/13 PHP
完美的php分页类
2017/10/24 PHP
PHP后台备份MySQL数据库的源码实例
2019/03/18 PHP
js函数调用常用方法详解
2012/12/03 Javascript
用正则表达式替换图片地址img标签
2013/11/22 Javascript
JavaScript中获取高度和宽度函数总结
2014/10/08 Javascript
jQuery焦点控制图层展示延迟隐藏的方法
2015/03/09 Javascript
JavaScript面向对象的实现方法小结
2015/04/14 Javascript
swtich/if...else的替代语句
2015/08/16 Javascript
jquery点击缩略图切换视频播放特效代码分享
2015/09/15 Javascript
jQuery简单操作cookie的插件实例
2016/01/13 Javascript
JS实现的颜色实时渐变效果完整实例
2016/03/25 Javascript
浅析jquery与checkbox的checked属性的问题
2016/04/27 Javascript
轻松掌握JavaScript中的Math object数学对象
2016/05/26 Javascript
Js 获取、判断浏览器版本信息的简单方法
2016/08/08 Javascript
footer定位页面底部(代码分享)
2017/03/07 Javascript
Vue.js仿Metronic高级表格(二)数据渲染
2017/04/19 Javascript
详解angular笔记路由之angular-router
2017/09/12 Javascript
小程序兼容安卓和IOS数据处理问题及坑
2018/09/18 Javascript
vue+高德地图写地图选址组件的方法
2019/05/18 Javascript
Vue响应式原理Observer、Dep、Watcher理解
2019/06/06 Javascript
微信小程序开发(二):页面跳转并传参操作示例
2020/06/01 Javascript
jQuery实现简单弹幕制作
2020/12/10 jQuery
Python实现登录人人网并抓取新鲜事的方法
2015/05/11 Python
如何在Python函数执行前后增加额外的行为
2016/10/20 Python
Python yield 使用方法浅析
2017/05/20 Python
python的Crypto模块实现AES加密实例代码
2018/01/22 Python
Python远程linux执行命令实现
2020/11/11 Python
英国领先的名牌服装折扣零售商:Brown Bag Clothing
2019/01/08 全球购物
如何选择使用结构还是类
2014/05/30 面试题
通用求职信范文模板分享
2013/12/27 职场文书
JavaScript组合继承详解
2021/11/07 Javascript