axios发送post请求,提交图片类型表单数据方法


Posted in Javascript onMarch 16, 2018

DOME

<input type="file" @change="upload" ref="upload">

接口

const userUploadAtt = (File,config) => axios.post("接口",File,config)

处理数据

let input = this.$refs.upload 
创建一个空的FormData对象 
let data = new FormData();
使用FormData.append来添加键/值对到表单里面;
data.append('file', input.files[0]);
upload(){
 userUploadAtt(data,{headers: {'Content-Type': 'multipart/form-data'}}).then((response)=>{
  this.headPhoto = response.data[0].msg.url;
 }).catch(()=>{
 })
}

注意:

如果

axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=UTF-8'
post请求时候表单上传不需要引入qs.stringify()

以上这篇axios发送post请求,提交图片类型表单数据方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript使用yield模拟多线程的方法
Mar 19 Javascript
jQuery实现灰蓝风格标准二级下拉菜单效果代码
Aug 31 Javascript
jQuery实现自定义右键菜单的树状菜单效果
Sep 02 Javascript
使用JavaScript脚本无法直接改变Asp.net中Checkbox控件的Enable属性的解决方法
Sep 16 Javascript
jQuery实现内容定时切换效果完整实例
Apr 06 Javascript
AngularJs验证重复密码的方法(两种)
Nov 25 Javascript
JS异步文件上传(兼容IE8+)
Apr 02 Javascript
实例讲解Vue.js中router传参
Apr 22 Javascript
JS集合set类的实现与使用方法示例
Feb 01 Javascript
JavaScript代码压缩工具UglifyJS和Google Closure Compiler的基本用法
Apr 13 Javascript
vue 点击其他区域关闭自定义div操作
Jul 17 Javascript
js利用拖放实现添加删除
Aug 27 Javascript
Vue实现搜索 和新闻列表功能简单范例
Mar 16 #Javascript
vue axios 表单提交上传图片的实例
Mar 16 #Javascript
vue中实现图片和文件上传的示例代码
Mar 16 #Javascript
vue中手机号,邮箱正则验证以及60s发送验证码的实例
Mar 16 #Javascript
Vue实现active点击切换方法
Mar 16 #Javascript
详解Vue.js项目API、Router配置拆分实践
Mar 16 #Javascript
vue实现tab切换外加样式切换方法
Mar 16 #Javascript
You might like
PHP+SQL 注入攻击的技术实现以及预防办法
2010/12/29 PHP
PHP基础知识介绍
2013/09/17 PHP
php从数组中随机选择若干不重复元素的方法
2015/03/14 PHP
PHP调用.NET的WebService 简单实例
2015/03/27 PHP
php实现模拟登陆方正教务系统抓取课表
2015/05/19 PHP
ThinkPHP在Cli模式下使用模板引擎的方法
2015/09/25 PHP
Zend Framework基本页面布局分析
2016/03/19 PHP
ThinkPHP中调用PHPExcel的实现代码
2017/04/08 PHP
CodeIgniter框架数据库基本操作示例
2018/05/24 PHP
详解php用static方法的原因
2018/09/12 PHP
Javascript绝句欣赏 一些经典的js代码
2012/02/22 Javascript
jquery ajax,ashx,json的用法总结
2014/02/12 Javascript
实例详解ECMAScript5中新增的Array方法
2016/04/05 Javascript
动态加载js、css的实例代码
2016/05/26 Javascript
Bootstrap开发实战之第一次接触Bootstrap
2016/06/02 Javascript
BootStrap 智能表单实战系列(十)自动完成组件的支持
2016/06/13 Javascript
js如何判断是否在iframe中及防止网页被别站用iframe嵌套
2017/01/11 Javascript
用file标签实现多图文件上传预览
2017/02/14 Javascript
原生JS实现 MUI导航栏透明渐变效果
2017/11/07 Javascript
echarts学习笔记之箱线图的分析与绘制详解
2017/11/22 Javascript
解决vue-cli + webpack 新建项目出错的问题
2018/03/20 Javascript
vue自定义指令的创建和使用方法实例分析
2018/12/04 Javascript
小程序实现左滑删除效果
2019/07/25 Javascript
vue表单数据交互提交演示教程
2019/11/13 Javascript
vue+element使用动态加载路由方式实现三级菜单页面显示的操作
2020/08/04 Javascript
[01:02:00]DOTA2-DPC中国联赛 正赛 Elephant vs IG BO3 第三场 1月24日
2021/03/11 DOTA
Python下的subprocess模块的入门指引
2015/04/16 Python
python 两个数据库postgresql对比
2019/10/21 Python
Pytorch之view及view_as使用详解
2019/12/31 Python
Ubuntu16.04安装python3.6.5步骤详解
2020/01/10 Python
用CSS3实现瀑布流布局的示例代码
2017/11/10 HTML / CSS
html5手机键盘弹出收起的处理
2020/01/20 HTML / CSS
银行委托书范本
2014/04/04 职场文书
2016年第29个世界无烟日宣传活动总结
2016/04/06 职场文书
使用MybatisPlus打印sql语句
2022/04/22 SQL Server
CSS 鼠标选中文字后改变背景色的实现代码
2023/05/21 HTML / CSS