vue axios 表单提交上传图片的实例


Posted in Javascript onMarch 16, 2018

项目中用的element 的框架,然后在项目有一个添加数据需求是图片可上传,也可不上传,

然后问题就是element 中的上传控件在没有图片的时候是不会触发提交的,但接口写的是有file的  multipart/form-data    接收模式

所有只能自己另个模仿一个表单上传

<input class="file" name="file" type="file" accept="image/png,image/gif,image/jpeg" @change="update"/>
let file = e.target.files[0];    
   let param = new FormData(); //创建form对象 
   param.append('file',file,file.name);//通过append向form对象添加数据 
   param.append('chunk','0');//添加form表单中其他数据 
   
   let config = { 
   headers:{'Content-Type':'multipart/form-data'} 
   }; //添加请求头 
   this.axios.post('http://upload.qiniu.com/',param,config) 
   .then(response=>{ 
   console.log(response.data); 
   })

以上这篇vue axios 表单提交上传图片的实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jquery 跳到顶部和底部动画2句代码简单实现
Jul 18 Javascript
jQuery入门基础知识学习指南
Aug 14 Javascript
JS实现的自定义右键菜单实例二则
Sep 01 Javascript
JavaScript设计模式初探
Jan 07 Javascript
jQuery监听文件上传实现进度条效果的方法
Oct 16 Javascript
ES6中module模块化开发实例浅析
Apr 06 Javascript
Angular directive递归实现目录树结构代码实例
May 05 Javascript
JavaScript使用readAsDataURL读取图像文件
May 10 Javascript
JavaScript实现获取用户单击body中所有A标签内容的方法
Jun 05 Javascript
vue 国际化 vue-i18n 双语言 语言包
Jun 07 Javascript
vue左侧菜单,树形图递归实现代码
Aug 24 Javascript
JS性能优化实现方法及优点进行
Aug 30 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
javaScript中&quot;==&quot;和&quot;===&quot;的区别详解
Mar 16 #Javascript
node.js博客项目开发手记
Mar 16 #Javascript
You might like
用libTemplate实现静态网页的生成
2006/10/09 PHP
利用PHP扩展Xhprof分析项目性能实践教程
2018/09/05 PHP
Yii 框架入口脚本示例分析
2020/05/19 PHP
js实现在文本框光标处添加字符的方法介绍
2012/11/24 Javascript
js字母大小写转换实现方法总结
2013/11/13 Javascript
JS中的异常处理方法分享
2013/12/22 Javascript
使用jQuery动态加载js脚本文件的方法
2014/04/03 Javascript
angularJS 中$scope方法使用指南
2015/02/09 Javascript
JavaScript拖拽、碰撞、重力及弹性运动实例分析
2016/01/08 Javascript
JS如何设置iOS中微信浏览器的title
2016/11/22 Javascript
bootstrap模态框垂直居中效果
2016/12/03 Javascript
详解Vue2 无限级分类(添加,删除,修改)
2017/03/07 Javascript
Angular实现的table表格排序功能完整示例
2017/12/22 Javascript
Vue 实现拨打电话操作
2020/11/16 Javascript
[03:07]DOTA2英雄基础教程 冰霜诅咒极寒幽魂
2013/12/06 DOTA
[01:15:29]DOTA2上海特级锦标赛主赛事日 - 3 胜者组第二轮#2Secret VS EG第三局
2016/03/04 DOTA
jupyter安装小结
2016/03/13 Python
CentOS下使用yum安装python-pip失败的完美解决方法
2017/08/16 Python
Django读取Mysql数据并显示在前端的实例
2018/05/27 Python
使用Anaconda3建立虚拟独立的python2.7环境方法
2018/06/11 Python
详解Python_shutil模块
2019/03/15 Python
PyTorch中常用的激活函数的方法示例
2019/08/20 Python
python 爬虫百度地图的信息界面的实现方法
2019/10/27 Python
python各层级目录下import方法代码实例
2020/01/20 Python
tensorflow-gpu安装的常见问题及解决方案
2020/01/20 Python
python实现程序重启和系统重启方式
2020/04/16 Python
借助HTML5 Canvas API制作一个简单的猜字游戏
2016/03/25 HTML / CSS
味多美官网:蛋糕订购,100%使用天然奶油
2017/11/10 全球购物
技校生自我鉴定
2013/12/08 职场文书
运动会通讯稿50字
2014/01/30 职场文书
签约仪式主持词
2014/03/19 职场文书
《三个小伙伴》教学反思
2014/04/11 职场文书
政府班子四风问题整改措施思想汇报
2014/10/08 职场文书
七年级作文之关于奶奶
2019/10/29 职场文书
简单实现一个手持弹幕功能+文字抖动特效
2021/03/31 HTML / CSS
Minikube搭建Kubernetes集群
2022/03/31 Servers