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小玩意 几个属性相加不能超过一个特定值.
Sep 29 Javascript
表单类各种类型(文本框)失去焦点效果jquery代码
Apr 26 Javascript
javascript event在FF和IE的兼容传参心得(绝对好用)
Jul 10 Javascript
node.js中的fs.lchmod方法使用说明
Dec 16 Javascript
手机端点击图片放大特效PhotoSwipe.js插件实现
Aug 24 Javascript
vue使用$emit时,父组件无法监听到子组件的事件实例
Feb 26 Javascript
详解React Native 屏幕适配(炒鸡简单的方法)
Jun 11 Javascript
vue组件从开发到发布的实现步骤
Nov 11 Javascript
利用JS代码自动删除稿件的普通弹幕功能
Sep 20 Javascript
JS实现动态倒计时功能(天数、时、分、秒)
Dec 12 Javascript
使用konva和vue-konva库实现拖拽滑块验证功能
Apr 27 Javascript
jQuery实现动态加载瀑布流
Sep 01 jQuery
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用户指南-cookies部分
2006/10/09 PHP
从康盛产品(discuz)提取出来的模板类
2011/06/28 PHP
php实现Mysql简易操作类
2015/10/11 PHP
php下的原生ajax请求用法实例分析
2020/02/28 PHP
javascript 中对象的继承〔转贴〕
2007/01/22 Javascript
jquery imgareaselect 使用利用js与程序结合实现图片剪切
2009/07/30 Javascript
JS自动缩小超出大小的图片
2012/10/12 Javascript
用JQuery 判断某个属性是否存在hasAttr的解决方法
2013/04/26 Javascript
不使用浏览器运行javascript代码的方法
2013/07/24 Javascript
Javascript获取当前时间函数和时间操作小结
2014/10/01 Javascript
nodejs中操作mysql数据库示例
2014/12/20 NodeJs
高性能JavaScript 重排与重绘(2)
2015/08/11 Javascript
基于javascript编写简单日历
2016/05/02 Javascript
原生JS实现风箱式demo,并封装了一个运动框架(实例代码)
2016/07/22 Javascript
JavaScript组成、引入、输出、运算符基础知识讲解
2016/12/08 Javascript
基于JavaScript实现的折半查找算法示例
2017/04/14 Javascript
浅析 NodeJs 的几种文件路径
2017/06/07 NodeJs
基于JavaScript实现评论框展开和隐藏功能
2017/08/25 Javascript
JavaScript实现离开页面前提示功能【附jQuery实现方法】
2017/09/26 jQuery
easyui下拉框动态级联加载的示例代码
2017/11/29 Javascript
es6函数之尾递归用法实例分析
2020/04/25 Javascript
python获取当前计算机cpu数量的方法
2015/04/18 Python
python实现list元素按关键字相加减的方法示例
2017/06/09 Python
python  logging日志打印过程解析
2019/10/22 Python
浅谈pytorch卷积核大小的设置对全连接神经元的影响
2020/01/10 Python
使用Bazel编译TensorBoard教程
2020/02/15 Python
Python批量启动多线程代码实例
2020/02/18 Python
解决pycharm导入本地py文件时,模块下方出现红色波浪线的问题
2020/06/01 Python
使用python求斐波那契数列中第n个数的值示例代码
2020/07/26 Python
拿来就用!Python批量合并PDF的示例代码
2020/08/10 Python
python中用Scrapy实现定时爬虫的实例讲解
2021/01/18 Python
static全局变量与普通的全局变量有什么区别?static局部变量和普通局部变量有什么区别?static函数与普通函数有什么区别?
2015/02/22 面试题
如何提高SQL Server的安全性
2016/07/25 面试题
工作室成员个人发展规划范文
2014/01/24 职场文书
《黄河颂》教学反思
2014/02/07 职场文书
2014年技术员工作总结
2014/11/18 职场文书