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.文件
随机推荐
- 私有npm计划
为什么要建立私有npm 提高代码复用程度,增加团队沉淀 剥离项目依赖,工程更加轻量 引用全量更新,支持版本降级 建立模块文档,降低上手难度 全员把关代码质量,无需重复测试 构建工具已成趋势,优化发布流 ...
- 大牛们是如何开发 WordPress 主题的?
自己算是写过一个主题,目前也在用( 这里 -> http://udonmai.com/ ),所以多少想说两句. 当初走上web开发的路之后最想干的事情就是写个自己的WP主题...所以网上搜罗了很 ...
- 一、Vue基础之常用方法
一.JSON.parse() 与 JSON.stringify() 1.JSON.parse() :是从一个字符串中解析出 json 对象 //定义一个字符串 var data='{"nam ...
- Tomcat 8.5 配置自动从http跳转https
1.需要修改Tomcat目录下的conf/server.xml文件两处地方,Http端口,从默认的8080改为80:Https端口从8443改为443:(80\443分别都是http/https默认端 ...
- jq 实时监听input输入框的变化
项目需求中有时候需要实时监测 input 的值变化,虽然 input 自身有 focus 和 blur 事件,但是有时候跟需求不符合. 所以实时监听 input 值变化的代码为: $("#i ...
- JSON+如何处理JSON字符串
JSON(Javascript Object Notation)是一种轻量级的数据交换语言,以文字为基础,且易于让人阅读.尽管JSON是在Javascript的一个子集,但JSON是独立于语言的文本格 ...
- 字符串——AC自动机
目录 一.前言 二.思路 三.代码 四.参考资料 一.前言 以前一直没学AC自动机,主要是被名字吓到了,自动AC,这么强的名字肯定很难,学了后才发现,其实不难. AC自动机并不是Acept autom ...
- 解析之Nginx解析
- 【机器学习】Jackknife,Bootstraping, bagging, boosting, AdaBoosting, Rand forest 和 gradient boosting
Jackknife,Bootstraping, bagging, boosting, AdaBoosting, Rand forest 和 gradient boosting 这些术语,我经常搞混淆, ...
- Java学习-4
面向对象的三大特征之一:继承性 主要解决问题:共性抽取 继承关系当中的特点:子类可以拥有父类的“内容”,子类还可以拥有自己专属的内容 定义一个父类的格式(就是定义一个普通类的格式): Public c ...