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函数
May 27 Javascript
JS动画效果代码3
Apr 03 Javascript
javascript import css实例代码
Jul 18 Javascript
flash javascript之间的通讯方法小结
Dec 20 Javascript
一个可以随意添加多个序列的tag函数
Jul 21 Javascript
jQuery.extend 函数的详细用法
Jun 27 Javascript
IFrame跨域高度自适应实现代码
Aug 16 Javascript
下载文件个别浏览器文件名乱码解决办法
Mar 19 Javascript
javascript如何操作HTML下拉列表标签
Aug 20 Javascript
TypeScript入门-基本数据类型
Mar 28 Javascript
原生JavaScript实现的简单省市县三级联动功能示例
May 27 Javascript
vue实现pdf文档在线预览功能
Nov 26 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
实现分十页分向前十页向后十页的处理
2006/10/09 PHP
解析PHP 使用curl提交json格式数据
2013/06/29 PHP
CodeIgniter框架中_remap()使用方法2例
2014/03/10 PHP
PHP命名空间namespace用法实例分析
2016/09/27 PHP
[原创]PHP正则匹配中英文、数字及下划线的方法【用户名验证】
2017/08/01 PHP
PHP实现微信对账单处理
2018/10/01 PHP
JavaScript 高效运行代码分析
2010/03/18 Javascript
Jquery选择子控件&quot;大于号&quot;和&quot; &quot;区别介绍及使用示例
2013/06/25 Javascript
javascript实现粘贴qq截图功能(clipboardData)
2016/05/29 Javascript
JavaScript九九乘法口诀表的简单实现
2016/10/04 Javascript
AngularJS之自定义服务详解(factory、service、provider)
2017/04/14 Javascript
原生js封装运动框架的示例讲解
2017/10/01 Javascript
Node.js Buffer用法解读
2018/05/18 Javascript
微信小程序车牌号码模拟键盘输入功能的实现代码
2018/11/11 Javascript
微信小程序局部刷新触发整页刷新效果的实现代码
2018/11/21 Javascript
动态内存分配导致影响Javascript性能的问题
2018/12/18 Javascript
Vue 无限滚动加载指令实现方法
2019/05/28 Javascript
vue-cli3中vue.config.js配置教程详解
2019/05/29 Javascript
如何让微信小程序页面之间的通信不再变困难
2019/06/03 Javascript
基于redis的小程序登录实现方法流程分析
2020/05/25 Javascript
新手该如何学python怎么学好python?
2008/10/07 Python
python paramiko实现ssh远程访问的方法
2013/12/03 Python
wxpython中利用线程防止假死的实现方法
2014/08/11 Python
Python多线程编程(二):启动线程的两种方法
2015/04/05 Python
python代码实现ID3决策树算法
2017/12/20 Python
python基础教程之while循环
2019/08/14 Python
Python:二维列表下标互换方式(矩阵转置)
2019/12/02 Python
通过Turtle库在Python中绘制一个鼠年福鼠
2020/02/03 Python
python读取csv文件指定行的2种方法详解
2020/02/13 Python
详解PyQt5中textBrowser显示print语句输出的简单方法
2020/08/07 Python
弄清Pytorch显存的分配机制
2020/12/10 Python
CSS3 分类菜单效果
2019/05/27 HTML / CSS
英国手机零售商:Carphone Warehouse
2018/06/06 全球购物
迟到检讨书400字
2014/01/13 职场文书
超市促销活动方案
2014/03/05 职场文书
Jsonp劫持学习
2021/04/01 PHP