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 相关文章推荐
Mozilla中显示textarea中选择的文字
Sep 07 Javascript
jQuery live
May 15 Javascript
Tab切换组件(选项卡功能)实例代码
Nov 21 Javascript
jQuery实现仿淘宝带有指示条的图片转动切换效果完整实例
Mar 04 Javascript
JS对字符串编码的几种方式使用指南
May 14 Javascript
javascript基于prototype实现类似OOP继承的方法
Dec 16 Javascript
使用jQuery.form.js/springmvc框架实现文件上传功能
May 12 Javascript
js拼接html字符串的注意事项
Oct 13 Javascript
JS判断一个数是否是水仙花数
Jun 11 Javascript
利用three.js画一个3D立体的正方体示例代码
Nov 19 Javascript
vue实现图片预览组件封装与使用
Jul 13 Javascript
vue响应式原理与双向数据的深入解析
Jun 04 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正则
2006/07/07 PHP
全世界最小的php网页木马一枚 附PHP木马的防范方法
2009/10/09 PHP
PHP页面实现定时跳转的方法
2014/10/31 PHP
Laravel 5.4.36中session没有保存成功问题的解决
2018/02/19 PHP
DOM 中的事件处理介绍
2012/01/18 Javascript
javascript包装对象实例分析
2015/03/27 Javascript
javascript基于DOM实现省市级联下拉框的方法
2015/05/14 Javascript
jquery实现Ctrl+Enter提交表单的方法
2015/07/21 Javascript
js实现简洁大方的二级下拉菜单效果代码
2015/09/01 Javascript
基于jquery实现全屏滚动效果
2015/11/26 Javascript
JavaScript jQuery 中定义数组与操作及jquery数组操作
2015/12/18 Javascript
jquery插件treegrid树状表格的使用方法详解(.Net平台)
2017/01/03 Javascript
jquery平滑滚动到顶部插件使用详解
2017/05/08 jQuery
JS实现批量上传文件并显示进度功能
2017/06/27 Javascript
JS写XSS cookie stealer来窃取密码的步骤详解
2017/11/20 Javascript
vue使用ajax获取后台数据进行显示的示例
2018/08/09 Javascript
angular2实现统一的http请求头方法
2018/08/13 Javascript
ES6 Promise对象的含义和基本用法分析
2019/06/14 Javascript
python实现根据图标提取分类应用程序实例
2014/09/28 Python
浅谈Django REST Framework限速
2017/12/12 Python
pandas dataframe的合并实现(append, merge, concat)
2019/06/24 Python
Python传递参数的多种方式(小结)
2019/09/18 Python
python使用socket实现的传输demo示例【基于TCP协议】
2019/09/24 Python
numpy 返回函数的上三角矩阵实例
2019/11/25 Python
详解python 破解网站反爬虫的两种简单方法
2020/02/09 Python
CSS中垂直居中的简单实现方法
2015/07/06 HTML / CSS
校园环保标语
2014/06/13 职场文书
办理护照工作证明
2014/10/10 职场文书
小学生安全教育广播稿
2014/10/20 职场文书
2015年办公室工作总结范文
2015/03/31 职场文书
大国崛起观后感
2015/06/02 职场文书
CSS3实现指纹特效代码
2022/03/17 HTML / CSS
SQLServer RANK() 排名函数的使用
2022/03/23 SQL Server
关于Python使用turtle库画任意图的问题
2022/04/01 Python
Python按顺序遍历并读取文件夹中文件
2022/04/29 Python
MySQL优化之慢日志查询
2022/06/10 MySQL