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页面滚动时层智能浮动定位实现(jQuery/MooTools)
Aug 23 Javascript
jsvascript图像处理—(计算机视觉应用)图像金字塔
Jan 15 Javascript
js获取URL的参数的方法(getQueryString)示例
Sep 29 Javascript
动态添加option及createElement使用示例
Jan 26 Javascript
vue Render中slots的使用的实例代码
Jul 19 Javascript
自适应布局meta标签中viewport、content、width、initial-scale、minimum-scale、maximum-scale总结
Aug 18 Javascript
微信小程序倒计时功能实现代码
Nov 09 Javascript
js实时监控文本框输入字数的实例代码
Jan 18 Javascript
对Vue2 自定义全局指令Vue.directive和指令的生命周期介绍
Aug 30 Javascript
layer.msg()去掉默认时间,实现手动关闭的方法
Sep 12 Javascript
前端vue-cli项目中使用img图片和background背景图的几种方法
Nov 13 Javascript
vue 解决无法对未定义的值,空值或基元值设置反应属性报错问题
Jul 31 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 中执行系统外部命令
2006/10/09 PHP
PHP之变量、常量学习笔记
2008/03/27 PHP
PHP中的cookie不用刷新就生效的方法
2012/02/04 PHP
PHP 二维数组根据某个字段排序的具体实现
2014/06/03 PHP
select标签模拟/美化方法采用JS外挂式插件
2013/04/01 Javascript
判断js对象是否拥有某一个属性的js代码
2013/08/16 Javascript
Jquery Ajax解析XML数据(同步及异步调用)简单实例
2014/02/12 Javascript
jquery调取json数据实现省市级联的方法
2015/01/29 Javascript
简易的投票系统以及js刷票思路和方法
2015/04/07 Javascript
IE6兼容透明背景图片及解决方案
2015/08/19 Javascript
jQuery Easyui学习之datagrid 动态添加、移除editor
2016/01/27 Javascript
js HTML5 Ajax实现文件上传进度条功能
2016/02/13 Javascript
基于jquery trigger函数无法触发a标签的两种解决方法
2018/01/06 jQuery
javascript标准库(js的标准内置对象)总结
2018/05/26 Javascript
解决angularjs service中依赖注入$scope报错的问题
2018/10/02 Javascript
elementUI select组件value值注意事项详解
2019/05/29 Javascript
Typescript 中的 interface 和 type 到底有什么区别详解
2019/06/18 Javascript
基于NodeJS开发钉钉回调接口实现AES-CBC加解密
2020/08/20 NodeJs
vue 项目引入echarts 添加点击事件操作
2020/09/09 Javascript
[01:33:14]LGD vs VP Supermajor 败者组决赛 BO3 第二场 6.10
2018/07/04 DOTA
[03:08]TI9战队档案 - Vici Gaming
2019/08/20 DOTA
在Python中实现贪婪排名算法的教程
2015/04/17 Python
Python实现Kmeans聚类算法
2020/06/10 Python
对Python3+gdal 读取tiff格式数据的实例讲解
2018/12/04 Python
python+selenium实现QQ邮箱自动发送功能
2019/01/23 Python
使用python的pandas为你的股票绘制趋势图
2019/06/26 Python
python 怎样将dataframe中的字符串日期转化为日期的方法
2019/09/26 Python
Django中提示消息messages的设置方式
2019/11/15 Python
python 利用toapi库自动生成api
2020/10/19 Python
Fnac西班牙官网:法国文化和电子产品零售商
2021/03/14 全球购物
介绍一下UNIX启动过程
2013/11/14 面试题
汽车检测与维修专业求职信
2014/07/04 职场文书
2015年五四青年节活动总结
2015/02/10 职场文书
质量保证书格式
2015/02/27 职场文书
通知书大全
2015/04/27 职场文书
七年级作文之英语老师
2019/10/28 职场文书