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 相关文章推荐
精通Javascript系列之数据类型 字符串
Jun 08 Javascript
Javascript 修改String 对象 增加去除空格功能(示例代码)
Nov 30 Javascript
js实现屏幕自适应局部代码分享
Jan 30 Javascript
浅谈js键盘事件全面控制
Dec 01 Javascript
EasyUI学习之DataGird分页显示数据
Dec 29 Javascript
Javascript调试之console对象——你不知道的一些小技巧
Jul 10 Javascript
Angular2+国际化方案(ngx-translate)的示例代码
Aug 23 Javascript
基于对象合并功能的实现示例
Oct 10 Javascript
vue中各选项及钩子函数执行顺序详解
Aug 25 Javascript
vue中子组件的methods中获取到props中的值方法
Aug 27 Javascript
vue图片上传本地预览组件使用详解
Feb 20 Javascript
JS前端可视化canvas动画原理及其推导实现
Aug 05 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
php面向对象全攻略 (四)构造方法与析构方法
2009/09/30 PHP
php access 数据连接与读取保存编辑数据的实现代码
2010/05/12 PHP
PHP 安全检测代码片段(分享)
2013/07/05 PHP
PHP strstr 函数判断字符串是否否存在的实例代码
2013/09/28 PHP
Laravel6.0.4中将添加计划任务事件的方法步骤
2019/10/15 PHP
在Z-Blog中运行代码[html][/html](纯JS版)
2007/03/25 Javascript
Javascript 读书笔记索引贴
2010/01/11 Javascript
jQuery效果 slideToggle() 方法(在隐藏和显示之间切换)
2011/06/28 Javascript
jQuery.buildFragment使用方法及思路分析
2013/01/07 Javascript
JavaScript中的slice()方法使用详解
2015/06/06 Javascript
Javascript小技能总结(推荐)
2016/06/02 Javascript
JavaScript中动态向表格添加数据
2017/01/24 Javascript
vue实现ToDoList简单实例
2017/02/07 Javascript
nuxt+axios解决前后端分离SSR的示例代码
2017/10/24 Javascript
vue2.0 自定义 饼状图 (Echarts)组件的方法
2018/03/02 Javascript
JS使用正则表达式获取小括号、中括号及花括号内容的方法示例
2018/06/01 Javascript
Vue中对iframe实现keep alive无刷新的方法
2019/07/23 Javascript
微信小程序之下拉列表实现方法解析(附完整源码)
2019/08/23 Javascript
js实现列表向上无限滚动
2020/01/13 Javascript
vue+element_ui上传文件,并传递额外参数操作
2020/12/05 Vue.js
[43:57]Liquid vs Mineski 2019国际邀请赛小组赛 BO2 第二场 8.16
2019/08/19 DOTA
Python编程中用close()方法关闭文件的教程
2015/05/24 Python
在Apache服务器上同时运行多个Django程序的方法
2015/07/22 Python
Python实现短网址ShortUrl的Hash运算实例讲解
2015/08/10 Python
Python中字符串的常见操作技巧总结
2016/07/28 Python
python僵尸进程产生的原因
2017/07/21 Python
python中装饰器级连的使用方法示例
2017/09/29 Python
基于Django框架的权限组件rbac实例讲解
2019/08/31 Python
Django实现文章详情页面跳转代码实例
2020/09/16 Python
HTML5 DeviceOrientation实现手机网站摇一摇功能代码实例
2015/04/24 HTML / CSS
Haglöfs瑞典官方网站:haglofs火柴棍,欧洲顶级户外品牌
2018/10/18 全球购物
酒店管理专业毕业生推荐信
2013/11/10 职场文书
市场营销调查计划书
2014/05/02 职场文书
党的群众路线对照检查材料
2014/08/27 职场文书
如何写新闻稿
2015/07/18 职场文书
2019中秋节祝福语大全,提前收藏啦
2019/09/10 职场文书