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.文件
随机推荐
- react源码之render
1.最近学习react源码,刚刚入门,看了render的原理,到了fiberRoot的创建 如图:
- Win10怎样显示此电脑
1.在桌面空白处右击鼠标,在出现的选项框中选择“个性化”按钮: 2.在打开的页面中选择左侧的“主题”选项,在右侧选择“桌面图标设置”: 3.在弹出的小窗口中勾选“计算机”,点击“确定”,回到桌面即有此 ...
- AndroidManifest.xml中的<uses-feature>以及和<uses-permission>之间的联系
概述:<uses-feature>用来声明应用中需要用的硬件和软件的功能. 硬件特性:表明您的应用需要用的硬件功能. 功能类型 特征描述 描述 音频 android.hardware.au ...
- js 事件驱动机制
1.浏览器端的事件驱动机制 javascript 在浏览器端运行是单线程的,这是由浏览器决定的,这是为了避免多线程执行不同任务会发生冲突的情况.也就是说我们写的javascript 代码只在一个线程上 ...
- .NET制作滚动条
今天,在工作的时候,刚好做到了滚动条,对这点不是很懂,所以,研究了一下,记录在这里,与大家分享. 对于前台页面,我们就只需要设置数据表的样式:style="overflow: auto; 即 ...
- Nmap扫描二级目录
nmap --script http-enum -p80 192.168.2.100 //namp扫描2级目录
- app测试自动化之混合APP(之前的三篇为原生APP的操作)
混合开发的App中,经常会有内嵌的H5页面:定位方法与原生APP不同,需要上下文切换 #获取所有上下文contexts=dr.contextsprint(contexts)#打印当前上下文(有点问题应 ...
- Python爬虫学习==>第四章:MySQL的安装
学习目的: 掌握MySQL数据库的安装 正式步骤 Step1:安装数据库 百度MySQL,下载软件 端口设置 设置密码,我的密码123456 下一步 下一步 查看MySQL服务器是否启动 PS:未申明 ...
- selenium+java+eclipse web项目自动化测试环境搭建
一.java的安装与环境配置 1.下载JDK(Java Development Kit),下载地址 www.oracle.com 2.安装jdk(傻瓜式安装) 3.安装完成后,配置环境变量,步骤: ( ...
- Leetcode之广度优先搜索(BFS)专题-529. 扫雷游戏(Minesweeper)
Leetcode之广度优先搜索(BFS)专题-529. 扫雷游戏(Minesweeper) BFS入门详解:Leetcode之广度优先搜索(BFS)专题-429. N叉树的层序遍历(N-ary Tre ...