JS FormData上传文件的设置方法
更新时间：2017年07月05日 09:41:03 作者：qq451354
使用FormData上传文件时，总是获取不到req.file对象。发现是没有配置对FormData导致的，怎么解决这个问题呢？下面小编给大家带来了JS FormData上传文件的设置方法，需要的朋友参考下吧
使用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中的错误处理机制。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2022-10-10
这篇文章主要介绍了javascript基础篇（6）之函数表达式闭包的相关资料,需要的朋友可以参考下2015-12-12
这篇文章主要介绍了JavaScript学习笔记之数组去重的相关资料,需要的朋友可以参考下2016-03-03
这篇文章主要介绍了Javascript核心读书有感之语句,需要的朋友可以参考下2015-02-02
这篇文章主要为大家介绍了vue组件通信的几种方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助2021-12-12
这篇文章主要介绍了微信小程序实现bindtap等事件传参，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2019-04-04
其实防抖和节流不仅仅在面试中会让大家手写，在实际项目中也可以起到性能优化的作用，所以还是很有必要掌握的。本文就带大家彻底学会JavaScript手写防抖节流，需要的可以参考一下2022-11-11
javascript function调用时的参数检测常用办法
js中并不直接支持类似c#的方法重载，所以只能变相的来解决，示意代码：(利用了内置属性arguments)2010-02-02
下面小编就为大家带来一篇浅析JS动态创建元素【两种方法】。小编觉得挺不错的，现在分享给大家。一起跟随小编过来看看吧2016-04-04
JavaScript实现点击自动选择TextArea文本的方法
这篇文章主要介绍了JavaScript实现点击自动选择TextArea文本的方法,涉及javascript中focus()、select()方法的使用技巧,非常简单实用,需要的朋友可以参考下2015-07-07
最新评论