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上传文件的设置方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对我们网站的支持!
相关推荐
-
JS中使用FormData上传文件、图片的方法
关于FormData XMLHttpRequest Level 2添加了一个新的接口 ---- FormData 利用FormData对象,可以通过js用一些键值对来模拟一系列表单控件,可以使用XMLHttpRequest的 send( ) 方法来异步提交表单与普通的ajax相比,使用FormData的最大优点就是可以异步上传二进制文件 FormData对象 FormData对象,可以把所有表单元素的name与value组成一个queryString,提交到后台. 在使用ajax提交时,使用F
-
Ajax+FormData+javascript实现无刷新表单信息提交
原理: dom收集表单信息,利用FormData快速收集表单信息 ,实例化表单数据对象 同时收集fm的表单域信息. var fd = new FormData(fm); //实例化对象 alert(fd); fd对象内部有收集的form表单域信息 ajax传递表单信息 1.静态显示页面代码 <!DOCTYPE html > <html> <head> <meta http-equiv="Content-Type" content="t
-
JavaScript将base64图片转换成formData并通过AJAX提交的实现方法
之前为了拍摄照片使用了webcam相关的插件,其拍摄后得到的是base64格式的图片,直接显示没问题,在src中直接指定就可以了,但是要上传到server时问题就来了,server端接收的是标准的文件,也就是html form中type="file"的形式.想要沿用这个接口不更改server端代码,于是尝试将base64直接转换成标准的fomeData并通过AJAX提交. 第一步,将base64转换成二进制图片(Blob) 主要思路是整理一下base64的前面几个字符,预处理以后转换成
-
jQuery Ajax使用FormData对象上传文件的方法
FormData对象,是可以使用一系列的键值对来模拟一个完整的表单,然后使用XMLHttpRequest发送这个"表单". 在 Mozilla Developer 网站 使用FormData对象 有详尽的FormData对象使用说明. 但上传文件部分只有底层的XMLHttpRequest对象发送上传请求,那么怎么通过jQuery的Ajax上传呢? 本文将介绍通过jQuery使用FormData对象上传文件. 使用<form>表单初始化FormData对象方式上传文件 HTM
-
js获取上传文件的绝对路径实现方法
在html中 <input type="file" id="importFile" /> <input type="button" onclick="upload()"/> <script> function upload() { var filename = document.getElementById("importFile").value; // 这时的filen
-
谈谈基于iframe、FormData、FileReader三种无刷新上传文件的方法
发请求有两种方式,一种是用ajax,另一种是用form提交,默认的form提交如果不做处理的话,会使页面重定向.以一个简单的demo做说明: html如下所示,请求的路径action为"upload",其它的不做任何处理: <form method="POST" action="upload" enctype="multipart/form-data"> 名字 <input type="text&q
-
JS FormData上传文件的设置方法
使用FormData上传文件时,总是获取不到req.file对象.发现是没有配置对FormData导致. 这里我是在vue中使用axios发送的请求,配置代码如下.重点地方给出注释 <form id="uploadform" method="POST" enctype="multipart/form-data" :action="postImgApi" ref="uploadform"> <
-
记Laravel调用Gin接口调用formData上传文件的实现方法
第一次错误: [output] [c.FormFile error==>] multipart: NextPart: EOF file 没有传值,或者非预定格式,stream resource 第二次错误: [output] [c.FormFile error==>] multipart: NextPart: bufio: buffer full header头不需要 content-type => 'multipart/form-data' php 调用参考: 你可以通过使用 mult
-
Python模拟浏览器上传文件脚本的方法(Multipart/form-data格式)
http协议本身的原始方法不支持multipart/form-data请求,这个请求由原始方法演变而来的. multipart/form-data的基础方法是post,也就是说是由post方法来组合实现的,与post方法的不同之处:请求头,请求体. multipart/form-data的请求头必须包含一个特殊的头信息:Content-Type,且其值也必须规定为multipart/form-data,同时还需要规定一个内容分割符用于分割请求体中的多个post的内容,如文件内容和文本内容自然需要
-
jQuery.Form实现Ajax上传文件同时设置headers的方法
废话不多说了,关于jquery form实现ajax上传文件的方法,大家参考一下实例代码吧: <span style="font-family: Arial, Helvetica, sans-serif;">function ajaxSubmitForm() {</span> var option = { url : cache.batchImport, type : 'POST', dataType : 'json', headers : {"tok
-
JS简单验证上传文件类型的方法
本文实例讲述了JS简单验证上传文件类型的方法.分享给大家供大家参考,具体如下: function checkType(){ //得到上传文件的值 var fileName=document.getElementById("file_logo").value; //返回String对象中子字符串最后出现的位置. var seat=fileName.lastIndexOf("."); //返回位于String对象中指定位置的子字符串并转换为小写. var extensi
-
js前端上传文件缩略图技巧示例详解
目录 引言 文件对象简介 Blob File FileReader FormData 文件对象之间的关系 缩略图的实现 总结 引言 通常情况下,前端提交给服务器的数据格式为JSON格式,但很多时候用户想上传自己的头像.视频等,这些非文本数据的时候,就不能直接以JSON格式上传到后端了. 当我们要获取用户上传的文件,可以使用input表单项,将type属性值设置为“file”. <form action=""> <input type="file"
-
jQuery Ajax使用FormData上传文件和其他数据后端web.py获取
XMLHttpRequest Level 2 添加了一个新的接口--FormData.与普通的 Ajax 相比,使用 FormData 的最大优点就是我们可以异步上传二进制文件. jQuery 2.0+的版本支持FormData 方法一:使用<form>表单初始化FormData对象方式上传文件 •前端(JQuery): <form enctype="multipart/form-data"> <input type="file" na
-
vue.js异步上传文件前后端实现代码
本文实例为大家分享了vue.js异步上传文件的具体代码,供大家参考,具体内容如下 上传文件前端代码如下: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title></title> <meta charset="utf-8&qu
随机推荐
- 认识延迟时间为0的setTimeout
- Java对xls文件进行读写操作示例代码
- Python中subprocess的简单使用示例
- js实现的简单radio背景颜色选择器代码
- Bootstrap前端开发案例二
- typecho插件编写教程(五):核心代码
- php判断正常访问和外部访问的示例
- 如何解决phpmyadmin导入数据库文件最大限制2048KB
- Golang极简入门教程(二):方法和接口
- jquery简单体验
- Vue computed计算属性的使用方法
- JavaScript的作用域和块级作用域概念理解
- js 获取、清空input type="file"的值(示例代码)
- shell脚本中case条件控制语句的一个bug分析
- win2003服务器一招废掉所有木马(防提权)
- 人至贱则无敌
- javascript的数组和常用函数详解
- jQuery源码解读之addClass()方法分析
- 马尔可夫链算法(markov算法)的awk、C++、C语言实现代码
- jQuery ui实现动感的圆角渐变网站导航菜单效果代码