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上传文件做一个总结,通过视图提交表单太简单,这里不做阐述,希 ...
随机推荐
- C++字符串相互转换
转自cs_wu原文 C++ char*,const char*,string的相互转换 1. string转const char* string s ="abc"; const c ...
- Linux基础-7.Linux网络基础设置
装好Linux,Linux一般会默认使用NetworkManager来辅助管理网络配置.对于配置Linux服务器来说,我们不需要NetworkManager来配置网络,所以要关闭它,不然它会影响手动配 ...
- 一张图带你看懂原始dao与SQL动态代理开发的区别-Mybatis
//转载请注明出处:https://www.cnblogs.com/nreg/p/11156167.html 1.项目结构区别: 2.开发区别: 注:其中原始dao开发的实现类UserDaoImpl ...
- js utc转当地时间
javascript utc转当地时间 后台传过来的时间:2019-07-03T01:39:51.691242+08:00 转成当地时间:2019-07-02 17:39:51 new Date(20 ...
- vue+element 通过ref修改一切硬核样式~
今天的需求是这样的,点击按钮,弹出一个Popover 弹出框 然后老大说,把弹出框往下移移,box-shadow值设的大一些... 然后就查看elenent的Popover文档,并没有方法,而且这个组 ...
- Solr基础知识二(导入数据)
上一篇讲述了solr的安装启动过程,这一篇讲述如何导入数据到solr里. 一.准备数据 1.1 学生相关表 创建学生表.学生专业关联表.专业表.学生行业关联表.行业表.基础信息表,并创建一条小白的信息 ...
- MYSQL5.7生成列简介及创建
1.说明 生成列是由已存在的字段通过表达式计算得来的 2.生成列类型 VIRTUAL,即虚拟类型,字段值不实际存储,当读取行时再计算,虚拟列类型不占存储 STORED,即存储类型,字段值会实际存储起来 ...
- C# 验证控件的使用RequiredFieldValidator&CompareValidator
使用验证控件可以向服务器提交表单数据时验证表单内容,下面以RequiredFieldValidator和CompareValidator为例说明验证控件的用法 RequiredFieldValidat ...
- 记录一次编译安装Pg_rman缺少依赖包的问题
系统版本:CentOS版本6.10(最终版) pg_rman:https://github.com/ossc-db/pg_rman -bash-4.1$ makegcc -Wall -Wmissing ...
- SQL查询结果拼接成字符串
sqlserver中将查询结果拼接成字符串 #for xml path(param)--将查询结果以xml格式输出 1 select id,name from table1 for xml pat ...