我用到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. Jmeter:内存配置 -- 转发

    在压测过程中jmeter报内存溢出,可能的原因有很多.要注意下面三点: 1.单击压测过程中使用过多的线程,官网建议1000-2000.具体看机器的配置和启动应用的情况.(A single JMeter ...

  2. 关于 Safari 浏览器不支持 location [ window.location.href window.open()] 跳转问题的解决方案

    最近在做项目时,碰到 safari 浏览器不支持location跳转问题,针对此问题,可以通过 js 模拟点击时间来解决,代码如下: <!DOCTYPE HTML> <html la ...

  3. ABAP-表修改日志存储

    1.设置了变更文档的,可以通过查看标准表CDHDR,CDPOS SE38   --  RSUSR200   ST03N -- 专家模式 2.SE16N维护的数据,可以查看表SE16N_CD_KEY,S ...

  4. 编辑/etc/passwd文件进行权限升级的技巧

    0x00 前言 在本文中,我们将学习“修改/etc/passwd文件以创建或更改用户的root权限的各种方法”.有时,一旦目标被攻击,就必须知道如何在/etc/passwd文件中编辑自己的用户以进行权 ...

  5. SAP错误消息调试之七种武器:让所有的错误消息都能被定位

    目录 长生剑 - SAPGUI Where Used List 碧玉刀 - ABAP调试器观察点 霸王枪 - ABAP调试器动态断点 多情环 - ABAP代码静态扫描 孔雀翎 - SAT 离别钩 - ...

  6. Flask--登录验证(多个装饰器)

    登录验证(多个装饰器) from flask import Flask,url_for,session,render_template import functools app = Flask(__n ...

  7. .net core jenkins持续集成

    执行 Shell pwd ls echo ${PATH} whoami which dotnet dotnet --info dotnet --version echo '============== ...

  8. dedeCMS 两个站共用同一个数据库 图片路径统一

    1 .  在 /include/extend.fun.php 中增加方法: function replaceurl($newurl){ $newurl=str_replace('src="/ ...

  9. 部署GitLab时, 问题

    1. 开启防火墙可能会对 nginx 造成影响. 2. 安装 gitlab 会自带一个 nginx, 启动后会对 现有的nginx 造成影响, 解决方案 参考    连接 1

  10. 基于glew,freeglut的imshow

    OpenGL显示图片,这篇博客使用glew + freeglut + gdal来实现imshow. 主要修改: 使用BGR而不是RGB,保持和opencv行为一致 纯C,去掉C++相关的 去掉GDAL ...