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 相关文章推荐
兼容ie和firefox js关闭代码
Dec 11 Javascript
使用jQuery向asp.net Mvc传递复杂json数据-ModelBinder篇
May 07 Javascript
GridView中获取被点击行中的DropDownList和TextBox中的值
Jul 18 Javascript
浅谈轻量级js模板引擎simplite
Feb 13 Javascript
详解JavaScript中的blink()方法的使用
Jun 08 Javascript
基于jquery fly插件实现加入购物车抛物线动画效果
Apr 05 Javascript
BootStrap下的弹出框加载select2框架失败的解决方法
Aug 31 Javascript
Vue组件的使用及个人理解与介绍
Feb 09 Javascript
利用Node.js如何实现文件循环覆写
Apr 05 Javascript
Nuxt项目支持eslint+pritter+typescript的实现
May 20 Javascript
Vue.js递归组件实现组织架构树和选人功能案例分析
Jul 03 Javascript
JavaScript Array.flat()函数用法解析
Sep 02 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
Discuz! Passport 通行证整合
2008/03/27 PHP
php除数取整示例
2014/04/24 PHP
php利用反射实现插件机制的方法
2015/03/14 PHP
JavaScript中this关键字使用方法详解
2007/03/08 Javascript
js导航栏单击事件背景变换示例代码
2014/01/13 Javascript
jquery操作checkbox示例分享
2014/07/21 Javascript
JavaScript中的数组特性介绍
2014/12/30 Javascript
JavaScript中document对象使用详解
2015/01/06 Javascript
Javascript中的return作用及javascript return关键字用法详解
2015/11/05 Javascript
基于JavaScript的操作系统你听说过吗?
2016/01/28 Javascript
解决微信浏览器Javascript无法使用window.location.reload()刷新页面
2016/06/21 Javascript
使用纯JS代码判断字符串中有多少汉字的实现方法(超简单实用)
2016/11/12 Javascript
详解Angular2表单-模板驱动的表单(Template-Driven Forms)
2017/08/04 Javascript
浅谈angular.js跨域post解决方案
2017/08/30 Javascript
jQuery使用zTree插件实现可拖拽的树示例
2017/09/23 jQuery
详解Js中的模块化是如何实现的
2017/10/18 Javascript
使用JavaScript中的lodash编写双色球效果
2018/06/24 Javascript
JavaScript的Object.defineProperty详解
2018/07/09 Javascript
使用jQuery给Table动态增加行、清空table的方法
2018/09/05 jQuery
详解Angular中实现自定义组件的双向绑定的两种方法
2018/11/23 Javascript
vue配置文件实现代理v2版本的方法
2019/06/21 Javascript
[01:00]一分钟回顾2018DOTA2亚洲邀请赛现场活动
2018/04/07 DOTA
Python OS模块常用函数说明
2015/05/23 Python
python flask框架实现传数据到js的方法分析
2019/06/11 Python
Pandas之groupby( )用法笔记小结
2019/07/23 Python
Python+Opencv身份证号码区域提取及识别实现
2020/08/25 Python
Python fileinput模块如何逐行读取多个文件
2020/10/05 Python
python3字符串输出常见面试题总结
2020/12/01 Python
Dr. Martens马汀博士法国官网:马丁靴鼻祖
2020/01/15 全球购物
Deichmann英国:德国鞋类零售商
2021/01/30 全球购物
生产部管理制度
2014/01/31 职场文书
工作表现自我评价
2014/02/08 职场文书
小学红领巾广播稿(3篇)
2014/09/13 职场文书
新闻人物通讯稿
2014/10/09 职场文书
2014年企业党支部工作总结
2014/12/04 职场文书
安全保证书怎么写
2015/02/28 职场文书