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上传文件做一个总结,通过视图提交表单太简单,这里不做阐述,希 ...
随机推荐
- 【WEB基础】HTML & CSS 基础入门(2)选取工具:VS2019安装使用
前面 子曰“工欲善其事,必先利其器”.开始编写HTML代码前,我们该选择一款编辑工具,实际上,HTML作为标记语言,我们甚至可以直接用记事本来编写HTML代码,但记事本实在弱爆了.这里推荐使用Visu ...
- 面试官再问Redis分布式锁如何续期?这篇文章甩 他一脸
一.真实案例 二.Redis分布式锁的正确姿势 据肥朝了解,很多同学在用分布式锁时,都是直接百度搜索找一个Redis分布式锁工具类就直接用了.关键是该工具类中还充斥着很多System.out.prin ...
- old english diamaund钻石
Diamond Di"a*mond (?; 277), n. [OE. diamaund, the hardest iron, steel, diamond, Gr. . Perh. the ...
- [LeetCode] 114. 二叉树展开为链表 ☆☆☆(深度遍历)
二叉树展开为链表(很详细) 描述 给定一个二叉树,原地将它展开为链表. 例如,给定二叉树 1 / \ 2 5 / \ \3 4 6将其展开为: 1 \ 2 \ 3 \ 4 \ 5 \ 6 解析 变形的 ...
- php的多功能文件操作类
本类为文件操作类,实现了文件的建立,写入,删除,修改,复制,移动,创建目录,删除目录,列出目录里的文件等功能,路径后面别忘了加"/" 创建指定路径下的指定文件 * @param s ...
- Oracle数据库插入过程中特殊符号
-- 问题描述:(插入数据中有特殊符号)数据插入后乱码. -- 背景:客户提供部分Excel表格数据要求导入数据库.由于考虑到数据量不大所以粗略在Excel中进行了sql处理(在数据前后添加sql及对 ...
- Python入门篇-数据结构树(tree)的遍历
Python入门篇-数据结构树(tree)的遍历 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.遍历 迭代所有元素一遍. 二.树的遍历 对树中所有元素不重复地访问一遍,也称作扫 ...
- linux查看redis安装目录
1.在redis下查看安装目录 如果命令 which 和whereis 都找不到安装目录,可使用以下办法 ps -ef|grep redis 得到了进程号 xxxx 然后 ls -l /proc/xx ...
- poj3268 Silver Cow Party(最短路)
非常感谢kuangbin专题啊,这道题一开始模拟邻接表做的,反向边不好处理,邻接矩阵的话舒服多了. 题意:给n头牛和m条有向边,每头牛1~n编号,求所有牛中到x编号去的最短路+回来的最短路的最大值. ...
- 项目Alpha冲刺(团队)-总结篇
格式描述 课程名称:软件工程1916|W(福州大学) 作业要求:项目Alpha冲刺(团队)-代码规范.冲刺任务与计划 团队名称:为了交项目干杯 作业目标:描述项目预期计划.现实进展.过程体会.组员分工 ...