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.文件
随机推荐
- What happens in an async method
https://docs.microsoft.com/en-us/dotnet/csharp/programming-guide/concepts/async/task-asynchronous-pr ...
- jquery注册验证的写法
在做注册页面时会用到jquery验证注册信息,用户名,密码,邮箱,手机号的验证,比较简单的,新手莫怪... <script> function Name(){ var name = $(& ...
- 数据库开源框架之ormlite
主页: http://ormlite.com/ 配置: 添加以下依赖 * compile 'com.j256.ormlite:ormlite-android:4.48' * compile 'com. ...
- NAT(地址转换技术)详解
目录 NAT产生背景ip地址基础知识NAT技术的工作原理和特点静态NAT动态NATNAT重载(经常应用到实际中)NAT技术的优缺点优点缺点NAT穿越技术应用层网关(ALG)ALG的实际应用NAT技术的 ...
- tensorflow二进制文件读取与tfrecords文件读取
1.知识点 """ TFRecords介绍: TFRecords是Tensorflow设计的一种内置文件格式,是一种二进制文件,它能更好的利用内存, 更方便复制和移动,为 ...
- phpstrom--------config php interpreter
phpstrom是一款比较好用的php代码编辑器,使用phpstrom进行代码编辑时我可能会需要看一下在网页上的实际效果,但是PHPstrom本身只是一款编辑器,不具备运行功能,我们需要自己安装一个服 ...
- java:面向对象(接口(续),Compareble重写,Comparator接口:比较器的重写,内部类,垃圾回收机制)
接口: *接口定义:使用interface关键字 * [修饰符] interface 接口名 [extends 父接口1,父接口2...]{ * //常量的声明 * //方法的声明 * } *接口成员 ...
- Qt qss 动态属性-不同条件不同显示
一. 1.为了用户界面外观的动态变化,属性选择器可以与动态属性组合使用. 2.当一个属性值变化时,所引用的样式不会自动更新.相反地,必须手动触发更新才会生效.unpolish()用于清理之前的样式,而 ...
- 正说PropertyValuesProvider的应用
Github地址:https://github.com/andyslin/spring-ext 编译.运行环境:JDK 8 + Maven 3 + IDEA + Lombok spring-boot: ...
- 转-Uptime与数据中心等级认证
1 数据中心等级认证 随着数据中心的蓬勃发展,越来越多的标准被制定出具.其中,Uptime Tier认证在业内是认同度最高的标准.以前,Uptime在中国的宣传很少,很多人对Uptime及其认证体系不 ...