axios+FormData文件上传
axios+FormData文件上传
原理:FormData上传
创建一个FormData对象,将得到的文件流对象放在FormData内,然后使用axios上传
注意:
1.请求头设置
headers: { 'Content-Type': 'multipart/form-data' }
2.FormData对象
无论是用input type=“file”还是一些框架的上传组件,都可以的到一个file文件流,详见代码展示
代码:
我是使用的是iview的Upload组件
<Upload :before-upload="handleUpload"
accept=".rar"
:format="['.rar']"
:max-size=102400
action="#">
<Button size="small">选择文件</Button>
</Upload>
/* 上传文件 */
export const importFile = data => request({ url: '/ktdb/projectAdmission/import', method: 'post', headers: { 'Content-Type': 'multipart/form-data' }, data })
handleUpload (file) {
// 创建FormData对象
let param = new FormData()
// 将得到的文件流添加到FormData对象
param.append('file', file, file.name)
importFile(param).then((res) => {
console.log(res)
}
}
钻研不易,转载请注明出处。。。。。。
axios+FormData文件上传的更多相关文章
- vue+axios+elementUI文件上传与下载
vue+axios+elementUI文件上传与下载 Simple_Learn 关注 0.5 2018.05.30 10:20 字数 209 阅读 15111评论 4喜欢 6 1.文件上传 这里主要 ...
- requests接口自动化7-Multi/form-data文件上传形式的post请求:files
Multi/form-data文件上传形式的post请求:用files传参 fiddler里请求响应内容; 代码: import requests from requests_toolbelt imp ...
- vue+element UI + axios封装文件上传及进度条组件
1.前言 之前在做项目的时候,需要实现一个文件上传组件并且需要有文件上传进度条,现将之前的实现过程简单记录一下,希望可以帮助到有需要的人. 项目用的是Vue框架,UI库使用的是element UI,前 ...
- multipart/form-data 文件上传表单中 传递参数无法获取的原因!
1.什么是multipart/form-data 首先我们需要明白在html中的enctype属性, enctype:规定了form表单在发送到服务器时候编码方式.他有如下的三个值. ①applica ...
- Content-Type: multipart/form-data;文件上传利用
当我们找到一个文件上传接口时,发现他的MIME类型检测为Content-Type: multipart/form-data;时,我们就可以尝试下面几种方法来绕过限制. ---------------- ...
- angular form-data文件上传
前言:很久没更新博客,最近公司pc端技术选型用angular,这几天就赶鸭子上架,硬着头皮直接上手angular.其中有许多小坑陆陆续续踩起走.今天就遇到一个比较常见的问题:图片上传. 主题:图片上传 ...
- multipart/form-data文件上传
form表单的enctype属性:规定了form表单数据在发送到服务器时候的编码方式 application/x-www-form-urlencoded:默认编码方式 multipart/form-d ...
- .NET拾忆:FormData文件上传
方法1.FormData简单实现 后端: using System; using System.Collections.Generic; using System.IO; using System.L ...
- ajax 'Content-Type': 'multipart/form-data' ->文件上传
'Content-Type': 'multipart/form-data' :指定传输数据为二进制数据,例如图片.mp3.文件
随机推荐
- 【Spring】mvc:annotation-driven 使用
关注此标签,是在项目中有使用 <!-- 解决@ResponseBody 的实现类其默认的编码是 iso-8859-1的问题 --> <mvc:annotation-driven> ...
- 一句话说明Facbook React证书的矛盾点
这项专利授权说,如果您要使用我们根据这项授权发布的软件,假如您因为专利侵权而提起诉讼,您将失去我们的专利许可.
- ip地址后面的斜杠24
ip地址后面的斜杠24表示掩码位是24位的,即用32位二进制表示的子网掩码中有连续的24个“1”:11111111 11111111 11111111 00000000,将其转化为十进制,就是:255 ...
- ASP.NET Core开发者指南(转发)
ASP.NET Core开发者指南 2019年ASP.NET Core开发者指南: 你可以在下面找到一张图,该图展示了你可以选取的路径及你想学习的库,从而成为一名 ASP.NET Core 开发者.& ...
- qt liunx 安装命令
qt SDK : apt-get install qt-sdkqt 安装 : apt-get install qtcreator文档安装 : cmake kdelibs5-data subversio ...
- visual studio 2019 中初始化 vue.js 项目
vs项目模板,webpack模板的创建方式在vs里创建后,npm install的过程会卡很久,暂时原因不明,感觉应该是文件太多,需要写入太多零碎文件. 试了几种初始化方法,还是用最新cli创建最好, ...
- ERROR [org.hibernate.engine.jdbc.spi.SqlExceptionHelper] - Data truncation: Incorrect datetime value: '' for column 'pubdate' at row 1
之前的Connector/J版本是:mysql-connector-java-5.0.4-bin.jar 后来换成mysql-connector-java-5.1.45-bin.jar,问题解决 20 ...
- UBT框架加解密工具项目 UBT.Framework.Encryption
DESEncrypt.cs //==================================================================================== ...
- SqlServer数据库查看被锁表以及解锁Kill杀死进程
步骤1.查看锁表进程 2.杀死进程 --1.查询锁表进程 spid.和被锁表名称 tableName select request_session_id spid,OBJECT_NAME ...
- pthon基础知识(索引、切片、序列相加、乘法、检查元素是否是序列成员、计算序列长度、最大最小值)
序列 数据存储方式 数据结构 python 列表.元组.字典.集合.字符串 序列: 一块用于存放多个值的连续内存空间,并且按一定顺序排列,可以通过索引取值 索引(编号): 索引可以是负数 从左到 ...