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 相关文章推荐
用js实现的抽象CSS圆角效果!!
May 03 Javascript
从jquery的过滤器.filter()方法想到的
Sep 29 Javascript
深入理解JavaScript系列(42):设计模式之原型模式详解
Mar 04 Javascript
javascript中使用正则表达式清理table样式的代码
Apr 01 Javascript
举例讲解Node.js中的Writable对象
Jul 29 Javascript
BootStrap与Select2使用小结
Feb 17 Javascript
js实现彩色条纹滚动条效果
Mar 15 Javascript
如何使用vuejs实现更好的Form validation?
Apr 07 Javascript
JS遍历DOM文档树的方法实例详解
Apr 03 Javascript
js中数组对象去重的两种方法
Jan 18 Javascript
Vue实现一个图片懒加载插件
Mar 11 Javascript
微信小程序用户授权、位置授权及获取微信绑定手机号
Jul 18 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的5个安全措施小结
2012/07/17 PHP
php数组相加 array(“a”)+array(“b”)结果还是array(“a”)
2012/09/19 PHP
使用配置类定义Codeigniter全局变量
2014/06/12 PHP
在PHP站点的页面上添加Facebook评论插件的实例教程
2016/01/08 PHP
php的优点总结 php有哪些优点
2019/07/19 PHP
Javascript优化技巧(文件瘦身篇)
2008/01/28 Javascript
javascript 支持ie和firefox杰奇翻页函数
2008/07/22 Javascript
下载网站打开页面后间隔多少时间才显示下载链接地址的代码
2010/04/25 Javascript
JavaScript实现自动弹出窗口并自动关闭窗口的方法
2015/08/06 Javascript
详谈ES6中的迭代器(Iterator)和生成器(Generator)
2017/07/31 Javascript
使用js获取伪元素的content实例
2017/10/24 Javascript
React Native 使用Fetch发送网络请求的示例代码
2017/12/02 Javascript
vue实现图片滚动的示例代码(类似走马灯效果)
2018/03/03 Javascript
vue车牌号校验和银行校验实战
2019/01/23 Javascript
快速解决layui弹窗按enter键不停弹窗的问题
2019/09/18 Javascript
[04:21]狐狸妈带你到现场 DOTA2 TI中国区预选赛线下赛路线指引
2014/05/22 DOTA
解析Python中的生成器及其与迭代器的差异
2016/06/20 Python
对于Python中RawString的理解介绍
2016/07/07 Python
Python网络爬虫出现乱码问题的解决方法
2017/01/05 Python
Python3.4 tkinter,PIL图片转换
2018/06/21 Python
在win10和linux上分别安装Python虚拟环境的方法步骤
2019/05/09 Python
python3.6环境安装+pip环境配置教程图文详解
2019/06/20 Python
python 变量初始化空列表的例子
2019/11/28 Python
在keras里面实现计算f1-score的代码
2020/06/15 Python
用canvas显示验证码的实现
2020/04/10 HTML / CSS
Europcar意大利:汽车租赁
2019/07/07 全球购物
俄罗斯花园种植材料批发和零售网上商店:Беккер
2019/07/22 全球购物
巴西Mr. Cat在线商店:购买包包和鞋子
2019/09/08 全球购物
广州盈通面试题
2015/12/05 面试题
通知书大全
2015/04/27 职场文书
2015年学校党建工作总结
2015/05/19 职场文书
python 遍历磁盘目录的三种方法
2021/04/02 Python
Python机器学习之基础概述
2021/05/19 Python
详解Oracle数据库中自带的所有表结构(sql代码)
2021/11/20 Oracle
SQLServer中exists和except用法介绍
2021/12/04 SQL Server
SpringBoot 集成短信和邮件 以阿里云短信服务为例
2022/04/22 Java/Android