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 相关文章推荐
文本框输入时 实现自动提示(像百度、google一样)
Apr 05 Javascript
javascript中this做事件参数相关问题解答
Mar 17 Javascript
js与jquery获取父元素,删除子元素的两种不同方法
Jan 09 Javascript
js实现3D图片逐张轮播幻灯片特效代码分享
Sep 09 Javascript
IE中document.createElement的iframe无法设置属性name的解决方法
Sep 14 Javascript
javascript弹出窗口实现代码
Nov 12 Javascript
js跨域请求数据的3种常用的方法
Dec 01 Javascript
JS使用onerror捕获异常示例
Aug 03 Javascript
微信小程序实现简单input正则表达式验证功能示例
Nov 30 Javascript
Vue组件全局注册实现警告框的实例详解
Jun 11 Javascript
Vue路由history模式解决404问题的几种方法
Sep 29 Javascript
jQuery实现的模仿雨滴下落动画效果
Dec 11 jQuery
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实现保存submit内容之后禁止刷新
2014/03/19 PHP
Javascript与PHP验证用户输入URL地址是否正确
2014/10/09 PHP
php采用curl模仿登录人人网发布动态的方法
2014/11/07 PHP
PHP实现阳历到农历转换的类实例
2015/03/07 PHP
在WordPress中实现发送http请求的相关函数解析
2015/12/29 PHP
PHP中number_format()函数的用法讲解
2019/04/08 PHP
PHP大文件及断点续传下载实现代码
2020/08/18 PHP
jQuery中文入门指南,翻译加实例,jQuery的起点教程
2007/01/13 Javascript
jQuery 下拉列表 二级联动插件分享
2012/03/29 Javascript
JS localStorage实现本地缓存的方法
2013/06/22 Javascript
利用jquery包将字符串生成二维码图片
2013/09/12 Javascript
JS操作Cookie写入和读取实例代码
2013/10/20 Javascript
jquery中插件实现自动添加用户的具体代码
2013/11/15 Javascript
jquery渐隐渐显的图片幻灯闪烁切换实现方法
2015/02/26 Javascript
Vue数据驱动模拟实现4
2017/01/12 Javascript
Nodejs读取文件时相对路径的正确写法(使用fs模块)
2017/04/27 NodeJs
详解webpack require.ensure与require AMD的区别
2017/12/13 Javascript
Vue2.0 v-for filter列表过滤功能的实现
2018/09/07 Javascript
JavaScript常见鼠标事件与用法分析
2019/01/03 Javascript
js中的深浅拷贝问题简析
2019/05/10 Javascript
layui监听工具栏的实例(操作列表按钮)
2019/09/10 Javascript
Vue如何基于es6导入外部js文件
2020/05/15 Javascript
Ubuntu 14.04+Django 1.7.1+Nginx+uwsgi部署教程
2014/11/18 Python
Python中操作mysql的pymysql模块详解
2016/09/13 Python
python 利用pyttsx3文字转语音过程详解
2019/09/25 Python
Python使用grequests(gevent+requests)并发发送请求过程解析
2019/09/25 Python
python实现简单飞行棋
2020/02/06 Python
python爬虫学习笔记之Beautifulsoup模块用法详解
2020/04/09 Python
实习生体会的自我评价范文
2013/11/28 职场文书
2014大学生全国两会学习心得体会
2014/03/13 职场文书
我们的节日中秋活动方案
2014/08/19 职场文书
2015年大学宣传部工作总结
2015/05/26 职场文书
上帝也疯狂观后感
2015/06/09 职场文书
庆七一主持词
2015/06/29 职场文书
详解Vue的sync修饰符
2021/05/15 Vue.js
Promise静态四兄弟实现示例详解
2022/07/07 Javascript