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 相关文章推荐
11款基于Javascript的文件管理器
Oct 25 Javascript
JavaScript面向对象知识串结(读JavaScript高级程序设计(第三版))
Jul 17 Javascript
Jquery幻灯片特效代码分享--打开页面随机选择切换方式(3)
Aug 15 Javascript
jquery遍历table的tr获取td的值实现方法
May 19 Javascript
基于Node.js的JavaScript项目构建工具gulp的使用教程
May 20 Javascript
BootStrap Validator使用注意事项(必看篇)
Sep 28 Javascript
jQuery中delegate()方法的用法详解
Oct 13 Javascript
详解webpack 入门总结和实践(按需异步加载,css单独打包,生成多个入口文件)
Jun 20 Javascript
Bootstarp在pycharm中的安装及简单的使用方法
Apr 19 Javascript
Vue对象赋值视图不更新问题及解决方法
Jun 03 Javascript
8个有意思的JavaScript面试题
Jul 30 Javascript
JavaScript定时器常见用法实例分析
Nov 15 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/01 无线电
PHP按行读取文件时删除换行符的3种方法
2014/05/04 PHP
PHP独立Session数据库存储操作类分享
2014/06/11 PHP
ThinkPHP3.1查询语言详解
2014/06/19 PHP
php使用函数pathinfo()、parse_url()和basename()解析URL
2016/11/25 PHP
php+croppic.js实现剪切上传图片功能
2018/08/14 PHP
js 匿名调用实现代码
2009/06/19 Javascript
Javascript 读书笔记索引贴
2010/01/11 Javascript
jquery 学习之二 属性(类)
2010/11/25 Javascript
Three.js源码阅读笔记(物体是如何组织的)
2012/12/27 Javascript
js控制input输入字符解析
2013/12/27 Javascript
node.js中的fs.closeSync方法使用说明
2014/12/17 Javascript
JQuery中DOM事件合成用法实例分析
2015/06/13 Javascript
使用jquery+CSS3实现仿windows10开始菜单的下拉导航菜单特效
2015/09/24 Javascript
Jquery 垂直多级手风琴菜单附源码下载
2015/11/17 Javascript
JQuery datepicker 用法详解
2015/12/25 Javascript
js调用父框架函数与弹窗调用父页面函数的简单方法
2016/11/01 Javascript
浅谈原生JS实现jQuery的animate()动画示例
2017/03/08 Javascript
vue小白入门教程
2018/04/02 Javascript
JavaScript中关于base64的一些事
2019/05/06 Javascript
node运行js获得输出的三种方式示例详解
2020/07/02 Javascript
解决vue单页面应用打包后相对路径、绝对路径相关问题
2020/08/14 Javascript
python实现bucket排序算法实例分析
2015/05/04 Python
pyinstaller打包程序exe踩过的坑
2019/11/19 Python
外科实习自我鉴定
2013/10/06 职场文书
大学生旷课检讨书
2014/01/22 职场文书
安全检查与奖惩制度
2014/01/23 职场文书
学生保证书范文
2014/04/28 职场文书
社会实践活动总结报告
2014/04/29 职场文书
教师四风问题对照检查材料
2014/09/26 职场文书
安全保证书格式
2015/02/28 职场文书
社区党支部承诺书
2015/04/29 职场文书
2016中秋节月饼促销广告语
2016/01/28 职场文书
房屋买卖定金协议书
2016/03/21 职场文书
一看就懂的MySQL的聚簇索引及聚簇索引是如何长高的
2021/05/25 MySQL
Python 实现定积分与二重定积分的操作
2021/05/26 Python