FormData实现文件上传
我用到FormData传输的使用场景:vant UI组件里面 的图片上传这块,需要调用后台的图片上传接口,使用的是FormData方式上传的
https://www.cnblogs.com/hutuzhu/p/4409292.html 这个链接里面写的很全
FormData顾名思义就是表单数据的意思。当我们需要将整个表单用这种方法上传,只需要将整个form元素appdent进去 例如:
假设我已经有一个form表单。
let form = document.getElementById('#formData');
let formData = new FormData();
formData.append(form)
调取接口的时候将整个formData作为参数 即可
首先new FormData() 方法,FormData里面的方法就只有一个append方法。意思就是将你需要上传的文件 appdent 进去
在使用vantUI的图片上传组件(Uploader)有一个after-read 的Props 我们可以拿到 file
<van-uploader :after-read="afterRead" />
afterRead(file){
let formData = new FormData()
formData.append(file)
/*
下面请求接口,将formData作为参数传过去即可
*/
}
FormData实现文件上传的更多相关文章
- Multipart/form-data POST文件上传详解
Multipart/form-data POST文件上传详解 理论 简单的HTTP POST 大家通过HTTP向服务器发送POST请求提交数据,都是通过form表单提交的,代码如下: <form ...
- Multipart/form-data POST文件上传详解(转)
Multipart/form-data POST文件上传详解 理论 简单的HTTP POST 大家通过HTTP向服务器发送POST请求提交数据,都是通过form表单提交的,代码如下: <form ...
- 构建multipart/form-data实现文件上传
构建multipart/form-data实现文件上传 通常文件上传都是通过form表单中的file控件,并将form中的content-type设置为multipart/form-data.现在我们 ...
- FormData实现文件上传实例
单提交,文件上传是一个常用又十分麻烦的功能,以前要上传文件通常都是借助插件或者flash来实现,噼里啪啦的加载一大堆东西.自从有了HTML5的FormData后,老板再也不用担心我的上传了. Form ...
- HTML5 FormData实现文件上传实例
表单提交,文件上传是一个常用又十分麻烦的功能,以前要上传文件通常都是借助插件或者flash来实现,噼里啪啦的加载一大堆东西.自从有了HTML5的FormData后,老板再也不用担心我的上传了. For ...
- iframe 模拟ajax文件上传and formdata ajax 文件上传
对于文件上传 有好多种方式,一直想总结 文件上传的方法 今天就来写下 iframe 的文件上传的代码 本人语言表达能里有限,不多说了 直接上代码. 首先看 总体页面. 总共就三个文件. 实际上也就是 ...
- spring mvc利用MultipartResolver解析Multipart/form-data进行文件上传
之前的表单数据都是文本数据,现记录:利用MultipartResolver进行文件上传. ①首先,需引入commons-fileUpload和commons-io jar包,pom.xml文件的坐标: ...
- Multipart/form-data POST文件上传
简单的HTTP POST 大家通过HTTP向服务器发送POST请求提交数据,都是通过form表单提交的,代码如下: <form method="post"action=&qu ...
- vue使用formData进行文件上传
本文为博主原创,未经允许不得转载 1.vue页面 <ux-form ref="formRef" layout="vertical"> <ux- ...
- .NET和.NET Core Web APi FormData多文件上传对比
前言 最近因维护.NET和.NET Core项目用到文件上传功能,虽说也做过,但是没做过什么对比,借此将二者利用Ajax通过FormData上传文件做一个总结,通过视图提交表单太简单,这里不做阐述,希 ...
随机推荐
- [SDOI2008]仪仗队(欧拉函数)
题目 [SDOI2008]仪仗队 解析 这个题,我也不知道他们的soltion是怎么写的这么长的. 我们发现我们一次看一条直线上的第一个点,也就是说,若两个点斜率\(k=\frac{y}{x}\)相同 ...
- 【强烈推荐】ok-admin 一个好看又好用的后台模版!!!
ok-admin 一个很赞的,扁平化风格的,响应式布局的后台管理模版,旨为后端程序员减压! 目前一共有两个版本:ok-admin v1.0和ok-admin v2.0可自由选择! 源码地址:https ...
- 动画 VUE基础回顾8
过渡和动画 使用<transition> 组件包裹 例: <transition name="fade"> <div v-if="true& ...
- VUE过滤器 基础回顾5
过滤器是一种在模板中处理数据的便捷方式,特别适合对字符串和数组进行简易显示 <div id="app"> <p>商品1花费{{oneCost | froma ...
- Python的csv文件(csv模块)和ini文件(configparser模块)处理
Python的csv文本文件(csv模块)和ini文本文件(configparser模块)处理 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.csv文件 1>.CSV文件 ...
- ELK-Elasticsearch 基础使用
一.基本概念 1 Node 与 Cluster Elastic 本质上是一个分布式数据库,允许多台服务器协同工作,每台服务器可以运行多个 Elastic 实例.单个 Elastic 实例称为一个节点( ...
- Hoax or what UVA - 11136(multiset的应用)
刚开始把题意理解错了,结果样例没过,后来发现每天只处理最大和最小的,其余的不管,也就是说昨天的元素会影响今天的最大值和最小值,如果模拟的话明显会超时,故用multiset,另外发现rbegin()的功 ...
- 在markdown中插入github仓库中的图片
右击github中的图片,获得链接: https://github.com/nxf75/ML_Library/blob/master/Hadoop/Haddop%E6%A1%86%E6%9E%B6.p ...
- Python - 2和3的区别
编码: Python2的默认编码是ASCII码,这是导致Python2中经常遇到编码问题的主要原因之一,至于原因,在于Python这门语言出现的时候,还没有Unicode! Python3默认编码是U ...
- 由Catalan数所引出的
百度一番: 历史 ·1758年,Johann Segner 给出了欧拉问题的递推关系: ·1838年,研究热潮: –GabrielLame给出完整证明和简洁表达式: –EugèneCharlesCat ...