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 相关文章推荐
innerhtml用法 innertext用法 以及innerHTML与innertext的区别
Oct 26 Javascript
讨论javascript(一)工厂方式 js面象对象的定义方法
Dec 15 Javascript
jquery实现加载等待效果示例
Sep 25 Javascript
在javascript中如何得到中英文混合字符串的长度
Jan 17 Javascript
JS合并数组的几种方法及优劣比较
Sep 19 Javascript
Eclipse编辑jsp、js文件时卡死现象的解决办法汇总
Feb 02 Javascript
js以分隔符分隔数组中的元素并转换为字符串的方法
Nov 16 Javascript
JavaScript基础之this详解
Jun 04 Javascript
jQuery Position方法使用和兼容性
Aug 23 jQuery
JS中this的指向以及call、apply的作用
May 06 Javascript
简化vuex的状态管理方案的方法
Jun 02 Javascript
vue中beforeRouteLeave实现页面回退不刷新的示例代码
Nov 01 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
咖啡常见的种类
2021/03/03 新手入门
浅析ThinkPHP的模板输出功能
2014/07/01 PHP
PHP程序员简单的开展服务治理架构操作详解(三)
2020/05/14 PHP
JavaScript网页制作特殊效果用随机数
2007/05/22 Javascript
WordPress 插件——CoolCode使用方法与下载
2007/07/02 Javascript
(currentStyle)javascript为何有时用style得不到已设定的CSS的属性
2007/08/15 Javascript
jQuery选择头像并实时显示的代码
2010/06/27 Javascript
CSS(js)限制页面显示的文本字符长度
2012/12/27 Javascript
javascript删除字符串最后一个字符
2014/01/14 Javascript
浅析JavaScript事件和方法
2015/02/28 Javascript
简述AngularJS的控制器的使用
2015/06/16 Javascript
js实现按钮颜色渐变动画效果
2015/08/20 Javascript
jquery实现的伪分页效果代码
2015/10/29 Javascript
Node.js返回JSONP详解
2016/05/18 Javascript
js操作XML文件的实现方法兼容IE与FireFox
2016/06/25 Javascript
图片懒加载imgLazyLoading.js使用详解
2020/09/15 Javascript
AngularJS中ng-options实现下拉列表的数据绑定方法
2018/08/13 Javascript
layui监听下拉选框选中值变化的方法(包含监听普通下拉选框)
2019/09/24 Javascript
JavaScript代码简化技巧实例解析
2020/09/09 Javascript
[03:33]TI9战队采访 - Infamous
2019/08/20 DOTA
python3.6+opencv3.4实现鼠标交互查看图片像素
2018/02/26 Python
Python实现按照指定要求逆序输出一个数字的方法
2018/04/19 Python
python中pip的使用和修改下载源的方法
2019/07/08 Python
django 配置阿里云OSS存储media文件的例子
2019/08/20 Python
Python脚本实现监听服务器的思路代码详解
2020/05/28 Python
canvas中普通动效与粒子动效的实现代码示例
2019/01/03 HTML / CSS
一个基于canvas的移动端图片编辑器的实现
2020/10/28 HTML / CSS
SportsDirect.com马来西亚:英国第一体育零售商
2018/11/21 全球购物
简述安装Slackware Linux系统的过程
2012/01/12 面试题
离职证明标准格式
2014/09/15 职场文书
普通党员群众路线教育实践活动心得体会
2014/11/04 职场文书
作息时间调整通知
2015/04/22 职场文书
研究生论文答辩开场白
2015/05/27 职场文书
2016大学优秀学生干部事迹材料
2016/03/01 职场文书
关于antd tree 和父子组件之间的传值问题(react 总结)
2021/06/02 Javascript
JavaScript数组reduce()方法的语法与实例解析
2021/07/07 Javascript