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 相关文章推荐
如何实现修改密码时密码框显示保存到cookie的密码
Dec 10 Javascript
jquery实现手机发送验证码的倒计时代码
Feb 12 Javascript
JavaScript中的substr()方法使用详解
Jun 06 Javascript
BootStrap扔进Django里的方法详解
May 13 Javascript
javascript闭包功能与用法实例分析
Apr 06 Javascript
利用vueJs实现图片轮播实例代码
Jun 03 Javascript
vue router仿天猫底部导航栏功能
Oct 18 Javascript
vue+webpack实现异步加载三种用法示例详解
Apr 24 Javascript
深入理解JS中Number(),parseInt(),parseFloat()三者比较
Aug 24 Javascript
微信小程序自定义键盘 内部虚拟支付
Dec 20 Javascript
通过angular CDK实现页面元素拖放的步骤详解
Jul 01 Javascript
基于原生JS封装的Modal对话框插件的示例代码
Sep 09 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接口数据加密、解密、验证签名
2015/03/12 PHP
php实现背景图上添加圆形logo图标的方法
2016/11/17 PHP
php连接sftp的作用以及实例代码
2019/09/23 PHP
javascript中获取选中对象的类型
2007/04/02 Javascript
大家未必知道的Js技巧收藏
2008/04/07 Javascript
js中巧用cssText属性批量操作样式
2011/03/13 Javascript
Js中setTimeout()和setInterval() 何时被调用执行的用法
2013/04/12 Javascript
jquery时间下拉框小例子
2013/04/15 Javascript
提取jquery的ready()方法单独使用示例
2014/03/25 Javascript
使用jQuery实现验证上传图片的格式与大小
2014/12/03 Javascript
详解JS函数重载
2014/12/04 Javascript
JS实现保留n位小数的四舍五入问题示例
2016/08/03 Javascript
微信小程序 loading(加载中提示框)实例
2016/10/28 Javascript
通过修改360抢票的刷新频率和突破8车次限制实现方法
2017/01/04 Javascript
浅析JS中常用类型转换及运算符表达式
2017/07/23 Javascript
p5.js实现斐波那契螺旋的示例代码
2018/03/22 Javascript
JS实现的简单下拉框联动功能示例
2018/05/11 Javascript
JS温故而知新之变量提升和时间死区
2019/01/27 Javascript
JS扁平化输出数组的2种方法解析
2019/09/17 Javascript
vue中axios的二次封装实例讲解
2019/10/14 Javascript
jQuery cookie的公共方法封装和使用示例
2020/06/01 jQuery
[01:11:37]完美世界DOTA2联赛PWL S2 SZ vs FTD.C 第一场 11.19
2020/11/19 DOTA
Python解决鸡兔同笼问题的方法
2014/12/20 Python
Django内容增加富文本功能的实例
2017/10/17 Python
Python cookbook(数据结构与算法)实现查找两个字典相同点的方法
2018/02/18 Python
python: 判断tuple、list、dict是否为空的方法
2018/10/22 Python
Python 分享10个PyCharm技巧
2019/07/13 Python
俄罗斯茶和咖啡网上商店:Tea.ru
2021/01/26 全球购物
Shell脚本如何向终端输出信息
2014/04/25 面试题
群众路线教育实践活动心得体会
2014/03/07 职场文书
银行求职信范文
2014/05/26 职场文书
优秀共青团员事迹材料
2014/12/25 职场文书
2015社区爱国卫生工作总结
2015/04/21 职场文书
导游词之广州陈家祠
2019/10/21 职场文书
python识别围棋定位棋盘位置
2021/07/26 Python
欧元符号 €
2022/02/17 杂记