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文件上传的更多相关文章

  1. vue+axios+elementUI文件上传与下载

    vue+axios+elementUI文件上传与下载 Simple_Learn 关注  0.5 2018.05.30 10:20 字数 209 阅读 15111评论 4喜欢 6 1.文件上传 这里主要 ...

  2. requests接口自动化7-Multi/form-data文件上传形式的post请求:files

    Multi/form-data文件上传形式的post请求:用files传参 fiddler里请求响应内容; 代码: import requests from requests_toolbelt imp ...

  3. vue+element UI + axios封装文件上传及进度条组件

    1.前言 之前在做项目的时候,需要实现一个文件上传组件并且需要有文件上传进度条,现将之前的实现过程简单记录一下,希望可以帮助到有需要的人. 项目用的是Vue框架,UI库使用的是element UI,前 ...

  4. multipart/form-data 文件上传表单中 传递参数无法获取的原因!

    1.什么是multipart/form-data 首先我们需要明白在html中的enctype属性, enctype:规定了form表单在发送到服务器时候编码方式.他有如下的三个值. ①applica ...

  5. Content-Type: multipart/form-data;文件上传利用

    当我们找到一个文件上传接口时,发现他的MIME类型检测为Content-Type: multipart/form-data;时,我们就可以尝试下面几种方法来绕过限制. ---------------- ...

  6. angular form-data文件上传

    前言:很久没更新博客,最近公司pc端技术选型用angular,这几天就赶鸭子上架,硬着头皮直接上手angular.其中有许多小坑陆陆续续踩起走.今天就遇到一个比较常见的问题:图片上传. 主题:图片上传 ...

  7. multipart/form-data文件上传

    form表单的enctype属性:规定了form表单数据在发送到服务器时候的编码方式 application/x-www-form-urlencoded:默认编码方式 multipart/form-d ...

  8. .NET拾忆:FormData文件上传

    方法1.FormData简单实现 后端: using System; using System.Collections.Generic; using System.IO; using System.L ...

  9. ajax 'Content-Type': 'multipart/form-data' ->文件上传

    'Content-Type': 'multipart/form-data' :指定传输数据为二进制数据,例如图片.mp3.文件

随机推荐

  1. Nginx优化防爬虫 限制http请求方法 CDN网页加速 架构优化 监牢模式 控制并发量以及客户端请求速率

    Nginx防爬虫优化 Robots协议(也称为爬虫协议,机器人协议等)的全称是“网络爬虫排除标准”(Robots Exclusion Protocol),网站通过Robots协议告诉搜索引擎哪些页面可 ...

  2. UI的流畅度优化

    Android中所有的界面绘制工作都是在UI线程中进行的,提高UI流畅度的最核心根本在于释放UI线程.即:不在主线程中做耗时的操作. 很多人都知道,耗时的操作要放到子线程中去做,比如访问网络,比如读写 ...

  3. oracle 导出关键字说明

    关键字       说明(默认) ----------------------------------------- UserId    用户名/口令 Full      导出整个文件(N) Buff ...

  4. WPF Visifire 图表控件

    Visifire WPF 图表控件 破解 可能用WPF生成过图表的开发人员都知道,WPF虽然本身的绘图能力强大,但如果每种图表都自己去实现一次的话可能工作量就大了, 尤其是在开发时间比较紧的情况下.这 ...

  5. 内存数据库:Redis与Memcached的区别

    Redis与Memcached的区别 传统MySQL+ Memcached架构遇到的问题 实际MySQL是适合进行海量数据存储的,通过Memcached将热点数据加载到cache,加速访问,很多公司都 ...

  6. java中instanceof的基本使用

    java中的instanceof运算符是用于判断对象是否是指定类或这个指定类的子类的一个实例,返回值是布尔类型. 语法: boolean result = object instanceof clas ...

  7. javascript原生知识点

    1. 基本类型有哪几种?null 是对象吗?基本数据类型和复杂数据类型存储有什么区别? 基本类型有6种,分别是undefined,null,bool,string,number,symbol(ES6新 ...

  8. 允许Root登录Docker ubuntu(MAC主机,使用portainer管理)

    1. 完成ubuntu容器的建立,完成ssh端口映射 2. 进入portainer内容器的console界面完成如下修改 a 刷新安装源:apt-get update b 安装sshd:apt-get ...

  9. 【HANA系列】SAP HANA SQL字符串连接操作

    公众号:SAP Technical 本文作者:matinal 原文出处:http://www.cnblogs.com/SAPmatinal/ 原文链接:[HANA系列]SAP HANA SQL字符串连 ...

  10. SQLServer2008R2复制发布订阅(含局域网跨网段)调试总结

    需要注意的问题点: 一.发布服务器A和订阅服务器B都在同一个网段的局域网内 1.两台服务器的SQLServer版本必须一致. 2.两服务器之间访问没难度,直接就可以搜索到. 3.注意请求订阅和推送订阅 ...