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. python:科学计数法转化为浮点型数据

    def as_num(x): y='{:.5f}'.format(x) # 5f表示保留5位小数点的float型 return(y) 实验一下 as_num(1.2e-4) In [3]:as_num ...

  2. omniplan

    汉化版安装包 下载链接:https://pan.baidu.com/s/104ZddPtNWTHyEMZx90agKw 密码:qizl 序列号    Name: Appked    Serial: I ...

  3. 【React自制全家桶】八、React动画以及react-transition-group动画库的使用

    React动画通常有三种方法实现从易到难为: 1.transition(CSS3自带) 2.animation(CSS3自带) 3.react-transition-group动画库(需要引入插件) ...

  4. javascript之String对象

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  5. 使用SlidingDrawer(滑动式抽屉)实现抽屉效果

    SlidingDrawer隐藏屏外的内容,并允许用户通过handle以显示隐藏内容.它可以垂直或水平滑动,它有俩个View组成,其一是可以拖动的handle,其二是隐藏内容的View.它里面的控件必须 ...

  6. CSS display的几个常用的属性值,inline , block, inline-block

    1.解释一下display的几个常用的属性值,inline , block, inline-block inline(行内元素): 使元素变成行内元素,拥有行内元素的特性,即可以与其他行内元素共享一行 ...

  7. 六十六:CSRF攻击与防御之CSRF防御之ajax防御和ajax封装

    app里面还是要绑定CSRFProtect from flask_wtf import CSRFProtect # flask_wtf 已经提供CSRF的防御手段CSRFProtect(app) # ...

  8. C#中的datatable类型作为参数传入SQL的存储空间

    SQL中首先建立一个结构一样的自定义类型的表格,在存储空间中申明一个此类型的变量,此处注意此时后面必须有readonly,如: @paravalue_insert MaterialStruct rea ...

  9. 模拟窗口类ModelForm的应用

    模拟窗口类ModelForm的应用 模拟窗口是Form的窗口中的fields是引用models类 不知道窗口类,点击:https://www.cnblogs.com/guguobao/p/932202 ...

  10. Ubuntu 16.04 安装 google 输入法

    Ubuntu 16.04 安装 google 输入法 在命令行中运行:’sudo apt install fcitx-googlepinyin’ 在 system setting > Langu ...