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 相关文章推荐
Jquery中getJSON在asp.net中的使用说明
Mar 10 Javascript
struts2+jquery+json实现异步加载数据(自写)
Jun 24 Javascript
JS字符串拼接在ie中都报错的解决方法
Mar 27 Javascript
60个很实用的jQuery代码开发技巧收集
Dec 15 Javascript
jQuery获得包含margin的outerWidth和outerHeight的方法
Mar 25 Javascript
初步认识JavaScript函数库jQuery
Jun 18 Javascript
JavaScript判断数组是否包含指定元素的方法
Jul 01 Javascript
JavaScript String(字符串)对象的简单实例(推荐)
Aug 31 Javascript
巧用Vue.js+Vuex制作专门收藏微信公众号的app
Nov 03 Javascript
温故知新——JavaScript中的字符串连接问题最全总结(推荐)
Aug 21 Javascript
JavaScript引用类型RegExp基本用法详解
Aug 09 Javascript
element-ui 时间选择器限制范围的实现(随动)
Jan 09 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
Protoss建筑一览
2020/03/14 星际争霸
php按单词截取字符串的方法
2015/04/07 PHP
php实现scws中文分词搜索的方法
2015/12/25 PHP
在Javascript中 声明时用&quot;var&quot;与不用&quot;var&quot;的区别
2013/04/15 Javascript
Javascript中string转date示例代码
2013/11/01 Javascript
javascript 获取HTML DOM父、子、临近节点
2014/06/16 Javascript
JavaScript获取Url里的参数
2014/12/18 Javascript
JavaScript中指定函数名称的相关方法
2015/06/04 Javascript
比例尺、缩略图、平移缩放之百度地图添加控件方法
2015/08/03 Javascript
js事件处理程序跨浏览器解决方案
2016/03/27 Javascript
AngularJS基础 ng-options 指令详解
2016/08/02 Javascript
jQuery实现简单的抽奖游戏
2017/05/05 jQuery
Vue.js 中的 $watch使用方法
2017/05/25 Javascript
webpack4.x开发环境配置详解
2018/08/04 Javascript
JavaScript中的垃圾回收与内存泄漏示例详解
2019/05/02 Javascript
Nodejs中使用puppeteer控制浏览器中视频播放功能
2019/08/26 NodeJs
[02:41]DOTA2英雄基础教程 冥魂大帝
2014/01/16 DOTA
python执行等待程序直到第二天零点的方法
2015/04/23 Python
Python实现PS滤镜碎片特效功能示例
2018/01/24 Python
python编程使用selenium模拟登陆淘宝实例代码
2018/01/25 Python
python 递归深度优先搜索与广度优先搜索算法模拟实现
2018/10/22 Python
python基于C/S模式实现聊天室功能
2019/01/09 Python
在cmd中查看python的安装路径方法
2019/07/03 Python
Flask教程之重定向与错误处理实例分析
2019/08/01 Python
python GUI库图形界面开发之PyQt5结合Qt Designer创建信号与槽的详细方法与实例
2020/03/08 Python
python网络爬虫实现发送短信验证码的方法
2021/02/25 Python
css3弹性盒模型实例介绍
2013/05/27 HTML / CSS
HTML5+CSS3:3D展示商品信息示例
2017/01/03 HTML / CSS
Expedia爱尔兰:酒店、机票、租车及廉价假期
2017/01/02 全球购物
《狐假虎威》教学反思
2014/02/07 职场文书
记帐员岗位责任制
2014/02/08 职场文书
骨干教师考核方案
2014/05/09 职场文书
史上最牛的辞职信
2015/02/28 职场文书
2015年中学团委工作总结
2015/07/22 职场文书
Python基础之变量的相关知识总结
2021/06/23 Python
入门学习Go的基本语法
2021/07/07 Golang