我用到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实现文件上传的更多相关文章

  1. Multipart/form-data POST文件上传详解

    Multipart/form-data POST文件上传详解 理论 简单的HTTP POST 大家通过HTTP向服务器发送POST请求提交数据,都是通过form表单提交的,代码如下: <form ...

  2. Multipart/form-data POST文件上传详解(转)

    Multipart/form-data POST文件上传详解 理论 简单的HTTP POST 大家通过HTTP向服务器发送POST请求提交数据,都是通过form表单提交的,代码如下: <form ...

  3. 构建multipart/form-data实现文件上传

    构建multipart/form-data实现文件上传 通常文件上传都是通过form表单中的file控件,并将form中的content-type设置为multipart/form-data.现在我们 ...

  4. FormData实现文件上传实例

    单提交,文件上传是一个常用又十分麻烦的功能,以前要上传文件通常都是借助插件或者flash来实现,噼里啪啦的加载一大堆东西.自从有了HTML5的FormData后,老板再也不用担心我的上传了. Form ...

  5. HTML5 FormData实现文件上传实例

    表单提交,文件上传是一个常用又十分麻烦的功能,以前要上传文件通常都是借助插件或者flash来实现,噼里啪啦的加载一大堆东西.自从有了HTML5的FormData后,老板再也不用担心我的上传了. For ...

  6. iframe 模拟ajax文件上传and formdata ajax 文件上传

    对于文件上传 有好多种方式,一直想总结 文件上传的方法 今天就来写下 iframe  的文件上传的代码 本人语言表达能里有限,不多说了 直接上代码. 首先看 总体页面. 总共就三个文件. 实际上也就是 ...

  7. spring mvc利用MultipartResolver解析Multipart/form-data进行文件上传

    之前的表单数据都是文本数据,现记录:利用MultipartResolver进行文件上传. ①首先,需引入commons-fileUpload和commons-io jar包,pom.xml文件的坐标: ...

  8. Multipart/form-data POST文件上传

    简单的HTTP POST 大家通过HTTP向服务器发送POST请求提交数据,都是通过form表单提交的,代码如下: <form method="post"action=&qu ...

  9. vue使用formData进行文件上传

    本文为博主原创,未经允许不得转载 1.vue页面 <ux-form ref="formRef" layout="vertical"> <ux- ...

  10. .NET和.NET Core Web APi FormData多文件上传对比

    前言 最近因维护.NET和.NET Core项目用到文件上传功能,虽说也做过,但是没做过什么对比,借此将二者利用Ajax通过FormData上传文件做一个总结,通过视图提交表单太简单,这里不做阐述,希 ...

随机推荐

  1. 常用方法装windows

    1.通过制作启动盘来进行安装 (1)简单的启动盘制作工具 通过百度”启动盘“,会发现有很多制作启动盘的工具. 这些工具操作都比较简单,易于上手,功能强大,不仅能装系统,而且还能维修. 具体使用方法,官 ...

  2. 微信小程序代码开源啦

    想学习如何使用mpvue开发微信小程序吗? 想知道微信消息推送如何实现吗? 想知道如何用springboot开发小程序后台吗? 看这里就全都有了.耗时一个月打造的微信小程序:PSN折扣助手前后端所有源 ...

  3. Python illustrating Downhill simplex method for minimizing the user-supplied scalar function的代码

    学习过程,把代码过程较好的代码段做个记录,如下的代码段是关于Python illustrating Downhill simplex method for minimizing the user-su ...

  4. 如何封装一个自己的win7系统并安装到电脑做成双系统

    说明: 目前我是刚试玩所以总结得没有很详细,先粗略放一个,下次有时间再分开整理系统封装或者如何制作双系统. 教程参考地址: 1. https://www.sysceo.com/forum/thread ...

  5. Linux 用户账号与权限管理

    在Linux中,如何管理用户.管理权限?请看下文,谢谢配合. 用户.组概述 用户分类 超级用户:root,人为交互最高权限用户,system为最高权限用户. 普通用户:通过管理管理员创建,权限受到一定 ...

  6. secureCRT 中各种传输协议分析 启动daemon运行守护进程(转)

    转载链接:http://blog.sina.com.cn/s/blog_61798d5d01018yk4.html [Telnet]著名的终端访问协议,传统的网络服务程序,如FTP.POP和Telne ...

  7. Java调用Kotlin程序深度解析

    异常: 在之前我们已经学习在Kotlin中的所有异常都是运行期的,而不像Java分为运行期和非运行期,下面用代码来演示一下,先建一个Java的异常: 然后在Kotlin中来调用一下该Java中的方法 ...

  8. poj1734 Sightseeing trip(Floyd求无向图最小环)

    #include <iostream> #include <cstring> #include <cstdio> #include <algorithm> ...

  9. Windows环境下安装和使用nginx1.16.0

    nginx是一款开源的HTTP服务器和反向代理服务器,nginx可以作为Web服务器提供HTTP访问功能,类似于Apache.IIS等.目前nginx已经在国内外很多网站作为Web服务器或反向代理服务 ...

  10. jpa之No property buyerOpenId found for type OrderMaster! Did you mean 'buyerOpenid'?

    java.lang.IllegalStateException: Failed to load ApplicationContext at org.springframework.test.conte ...