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.文件
随机推荐
- Warning: setcookie() expects parameter 3 to be long, string given
Warning: setcookie() expects parameter 3 to be long, string given 这个是我用php7.0会报这个错误, 切换低版本php5.6就ok
- better-scroll 的介绍
配置项中的 probeType 属性,是number,当值为 0 ,不会实时监听 scroll 事件,设置为 2 - 3 ,可以实时监听 scroll 事件 pullUpload 选项,设置为 fal ...
- PHP中获取数组中单列的值
PHP中获取数组中单列的值如下: 利用PHP中的数组函数 array_column():返回数组中某个单列的值.(PHP 5.5+适用) 语法: array_column(array,column_k ...
- 最简SpringBoot程序制法
JDK:1.8.0_212 IDE:STS4(Spring Tool Suit4 Version: 4.3.2.RELEASE) 工程下载:https://files.cnblogs.com/file ...
- 如何实现一个串行promise
异步执行任务A.B.C,...... 1.使用数组的reduce方法,reduce里有四个参数,pre,next,index,arr, 2.如果then方法里返回的是一个promise对象,那么执行下 ...
- 最长公共子子串 java
package maxCommon; /** * 找到最长公共子串 * @author root */ public class MaxCommonUnSeries { public static v ...
- 搭建Git服务器及本机克隆提交
前文 Git是什么? Git是目前世界上最先进的分布式版本控制系统. SVN与Git的最主要的区别? SVN是集中式版本控制系统,版本库是集中放在中央服务器的,而干活的时候,用的都是自己的电脑,所以首 ...
- ABAP Field+offset字符串截取
*删除字符串末尾的字符 DATA:str TYPE string VALUE 'abc,defg,', sub_str TYPE string, num TYPE i. WRITE:/ str. nu ...
- ubuntu中配置jdk1.8
方法/步骤 1 首先,百度搜索jdk,选择第一个,网站是Oracle Jdk.点击进去 步骤阅读 2 点击Download,到官网下载linux版本的jdk.选择自己对应的操作系统及32或64位版 ...
- LeetCode.1071-字符串最大公约数(Greatest Common Divisor of Strings)
这是小川的第391次更新,第421篇原创 01 看题和准备 今天介绍的是LeetCode算法题中Easy级别的第253题(顺位题号是1071).对于字符串S和T,当且仅当S = T + ... + T ...