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浅谈之引用类型
Dec 18 Javascript
setinterval()与clearInterval()JS函数的调用方法
Jan 21 Javascript
javascript控制图片播放的实现代码
Jul 29 Javascript
浅析jQuery 3.0中的Data
Jun 14 Javascript
AngularJS 模块详解及简单实例
Jul 28 Javascript
JavaScript中object和Object的区别(详解)
Feb 27 Javascript
原生js实现轮播图
Feb 27 Javascript
Angular 2父子组件数据传递之局部变量获取子组件其他成员
Jul 04 Javascript
基于vue组件实现猜数字游戏
May 28 Javascript
JS实现方形抽奖效果
Aug 27 Javascript
koa-router路由参数和前端路由的结合详解
May 19 Javascript
VSCode插件安装完成后的配置(常用配置)
Aug 24 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实现的简单多进程服务器类完整示例
2020/02/01 PHP
TP5框架实现的数据库备份功能示例
2020/04/05 PHP
新浪中用来显示flash的函数
2007/04/02 Javascript
在textarea中显示html页面的javascript代码
2007/04/20 Javascript
判断客户端浏览器是否安装了Flash插件的多种方法
2010/08/11 Javascript
HTML上传控件取消选择
2013/03/06 Javascript
JS简单实现元素复制示例附图
2013/11/19 Javascript
js实现汉字排序的方法
2015/07/23 Javascript
基于jQuery实现网页打印功能
2015/12/01 Javascript
ES6(ECMAScript 6)新特性之模板字符串用法分析
2017/04/01 Javascript
基于JS实现网页中的选项卡(两种方法)
2017/06/16 Javascript
vue-cli单页应用改成多页应用配置详解
2017/07/14 Javascript
vue 组件中添加样式不生效的解决方法
2018/07/06 Javascript
Angular5集成eventbus的示例代码
2018/07/19 Javascript
使用node.js实现微信小程序实时聊天功能
2018/08/13 Javascript
详解微信小程序-canvas绘制文字实现自动换行
2019/04/26 Javascript
vue 项目软键盘回车触发搜索事件
2020/09/09 Javascript
vue实现可移动的悬浮按钮
2021/03/04 Vue.js
[46:03]LGD vs VGJ.T 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
python使用cPickle模块序列化实例
2014/09/25 Python
python获得linux下所有挂载点(mount points)的方法
2015/04/29 Python
python中as用法实例分析
2015/04/30 Python
使用Python+Splinter自动刷新抢12306火车票
2018/01/03 Python
Django中如何使用sass的方法步骤
2019/07/09 Python
Django配置文件代码说明
2019/12/04 Python
Python count函数使用方法实例解析
2020/03/23 Python
Python参数传递实现过程及原理详解
2020/05/14 Python
基于python实现计算两组数据P值
2020/07/10 Python
Numpy数组的广播机制的实现
2020/11/03 Python
中国领先的专业演出票务网:永乐票务
2016/08/29 全球购物
Foot Locker加拿大官网:美国知名运动产品零售商
2019/07/21 全球购物
工作感想范文
2015/08/07 职场文书
小学远程教育工作总结
2015/08/13 职场文书
深入浅析python3 依赖倒置原则(示例代码)
2021/07/09 Python
JavaScript实现酷炫的鼠标拖尾特效
2022/02/18 Javascript
OpenCV项目实践之停车场车位实时检测
2022/04/11 Python