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 动态添加表格行
Jun 22 Javascript
浅析jquery的js图表组件highcharts
Mar 06 Javascript
jQuery对于显示和隐藏等常用状态的判断方法
Dec 13 Javascript
javascript正则表达式之search()用法实例
Jan 19 Javascript
JavaScript 数组中最大最小值
Jun 05 Javascript
基于jQuery实现歌词滚动版音乐播放器的代码
Sep 17 Javascript
AngularJS中的缓存使用
Jan 11 Javascript
利用Vue.js+Node.js+MongoDB实现一个博客系统(附源码)
Apr 24 Javascript
AjaxUpLoad.js实现文件上传
Mar 05 Javascript
vue 引用自定义ttf、otf、在线字体的方法
May 09 Javascript
js脚本中执行java后台代码方法解析
Oct 11 Javascript
vue动态合并单元格并添加小计合计功能示例
Nov 26 Vue.js
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记录代码执行时间(实现代码)
2013/07/05 PHP
PHP中实现生成静态文件的方法缓解服务器压力
2014/01/07 PHP
php代码检查代理ip的有效性
2016/08/19 PHP
Laravel 5.3 学习笔记之 配置
2016/08/28 PHP
自己的js工具_Form 封装
2009/08/21 Javascript
JQuery防止退格键网页后退的实现代码
2012/03/23 Javascript
document.execCommand()的用法小结
2014/01/08 Javascript
javascript实现的平方米、亩、公顷单位换算小程序
2014/08/11 Javascript
js函数内变量的作用域分析
2015/01/12 Javascript
Clipboard.js 无需Flash的JavaScript复制粘贴库
2015/10/02 Javascript
js实现获取div坐标的方法
2015/11/16 Javascript
JS跨域交互(jQuery+php)之jsonp使用心得
2016/07/01 Javascript
Vue.js第四天学习笔记
2016/12/02 Javascript
jquery实现动态添加附件功能
2018/10/23 jQuery
Vue2.X和Vue3.0数据响应原理变化的区别
2019/11/07 Javascript
JavaScript中的惰性载入函数及优势
2020/02/18 Javascript
js实现无缝轮播图效果
2020/03/09 Javascript
[00:32]DOTA2上海特级锦标赛 Ehome战队宣传片
2016/03/03 DOTA
python with statement 进行文件操作指南
2014/08/22 Python
详细介绍Python函数中的默认参数
2015/03/30 Python
有关Python的22个编程技巧
2018/08/29 Python
python 发送和接收ActiveMQ消息的实例
2019/01/30 Python
Python生成器实现简单&quot;生产者消费者&quot;模型代码实例
2020/03/27 Python
Python参数传递实现过程及原理详解
2020/05/14 Python
Python暴力破解Mysql数据的示例
2020/11/09 Python
利用html5 canvas动态画饼状图的示例代码
2018/04/02 HTML / CSS
用canvas显示验证码的实现
2020/04/10 HTML / CSS
写给老师的表扬信
2014/01/21 职场文书
《与象共舞》教学反思
2014/02/24 职场文书
党支部公开承诺书
2014/03/28 职场文书
爱的奉献演讲稿
2014/09/10 职场文书
运动会广播稿诗歌版
2014/09/12 职场文书
2014年学校总务处工作总结
2014/12/08 职场文书
mongodb的安装和开机自启动详细讲解
2021/08/02 MongoDB
Windows 11要来了?微软文档揭示Win11太阳谷 / Win10有两个不同版本
2021/11/21 数码科技
剑指Offer之Java算法习题精讲二叉树的构造和遍历
2022/03/21 Java/Android