我用到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. mysql-数据备份与存储过程

    目录 修改隔离级别 存储过程 什么是存储过程 用来干什么 三种数据处理方式 备份与恢复 修改隔离级别 修改全局的 set global transaction isolation level read ...

  2. 2019-07-25 php错误级别及设置方法

    在php的开发过程里,我们总是会有一系列的错误警告,这些错误警告在我们开发的过程中是十分需要的,因为它能够提示我们在哪里出现了错误,以便修改和维护.但在网站开发结束投入使用时,这些报错我们就要尽量避免 ...

  3. Workerman简单开发示例实践(二)

    一.在Workerman目录下创建ws_test.php,如下图,并输入如下代码: <?php use Workerman\Worker; require_once __DIR__ . '/Au ...

  4. css 和常用快捷键

    一.css概述: 1.规则:CSS 规则由选择器,以及一条或多条声明两个部分构成. 2.选择器:选择器通常是您需要改变样式的 HTML 元素. 3.声明:声明是您要设置的样式(每条声明由一个属性和一个 ...

  5. ningx配置本地https环境

    由于项目改成了https访问,所以本地开发的时候也要通过https验证,避免页面发送http请求. 例如原来是这样访问:http://192.168.88.88:8080/ 或 http://loca ...

  6. Pycharm中连接数据库乱码问题解决

    当我们使用pycharm建立数据库之后,看到里面的数据都是乱码,就像下面一样: 其实这个并不是pycharm的显示问题,而是建立数据库时产生的. 解决方法是到指定字符集的命令提示符中重新建表并指定字符 ...

  7. Linux DNS 主从复制

    设置主从DNS的主要是为了冗余,分担压力,防止服务器宕机后,DNS无法正常解析. 配置 master 正常配置DNS服务. 设置主机名 [root@localhost ~]# hostnamectl ...

  8. 日志聚合工具loki

    目录 1.loki是什么 2.loki特点 3.loki组成 4.loki安装 4.1.添加helm的chart库 4.2.安装loki及promtail 4.3.安装grafana 5.配置和使用 ...

  9. hexo博客微博图床失效解决办法

    最近在v2ex上看到有人说微博图床开始限制外链了.当时我看了看我的博客,图片还好.第二天再去看的时候就挂了.评论里有人说改一个no-ferrer能解决. 记录一下操作方法. N:\blog\theme ...

  10. 第七篇:ORM框架SQLAlchemy

    阅读目录 一 介绍 二 创建表 三 增删改查 四 其他查询相关 五 正查.反查 一 介绍 SQLAlchemy是Python编程语言下的一款ORM框架,该框架建立在数据库API之上,使用关系对象映射进 ...