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 相关文章推荐
23个超流行的jQuery相册插件整理分享
Apr 25 Javascript
JavaScript 创建运动框架的实现代码
May 08 Javascript
jquery JSON的解析方式示例介绍
Jul 27 Javascript
node.js中的path.join方法使用说明
Dec 08 Javascript
JavaScript使用Replace进行字符串替换的方法
Apr 14 Javascript
JavaScript实现将数组数据添加到Select下拉框的方法
Aug 21 Javascript
JS清除文本框内容离开在恢复及鼠标离开文本框时触发js的方法
Jan 12 Javascript
JS实用技巧小结(屏蔽错误、div滚动条设置、背景图片位置等)
Jun 16 Javascript
一个简易的js图片轮播效果
Jul 22 Javascript
vue2单元测试环境搭建
May 24 Javascript
vue+Element实现搜索关键字高亮功能
May 28 Javascript
JS实现旋转木马轮播图
Jan 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
php设计模式 Chain Of Responsibility (职责链模式)
2011/06/26 PHP
PHP数组操作汇总 php数组的使用技巧
2011/07/17 PHP
对淘宝URL中ID提取的PHP代码
2013/09/01 PHP
PHP使用ffmpeg给视频增加字幕显示的方法
2015/03/12 PHP
PHP封装的字符串加密解密函数
2015/12/18 PHP
PHP操作MySQL的mysql_fetch_* 函数的常见用法教程
2015/12/25 PHP
[原创]PHP获取数组表示的路径方法分析【数组转字符串】
2017/09/01 PHP
用js实现的仿sohu博客更换页面风格(简单版)
2007/03/22 Javascript
jQuery学习笔记[1] jQuery中的DOM操作
2010/12/03 Javascript
javascript 利用Image对象实现的埋点(某处的点击数)统计
2012/12/28 Javascript
JS 退出系统并跳转到登录界面的实现代码
2013/06/29 Javascript
JavaScript中神奇的call()方法
2015/03/12 Javascript
javascript实现选中复选框后相关输入框变灰不可用的方法
2015/08/11 Javascript
详解Bootstrap按钮
2016/01/04 Javascript
微信小程序 底部导航栏目开发资料
2016/12/05 Javascript
AngularJS定时器的使用与移除操作方法【interval与timeout】
2016/12/14 Javascript
获取今天,昨天,本周,上周,本月,上月时间(实例分享)
2017/01/04 Javascript
基于jQuery实现的打字机效果
2017/01/16 Javascript
Vue分页组件实例代码
2017/04/17 Javascript
详解给Vue2路由导航钩子和axios拦截器做个封装
2018/04/10 Javascript
vue中使用微信公众号js-sdk踩坑记录
2019/03/29 Javascript
Vue项目中使用jsonp抓取跨域数据的方法
2019/11/10 Javascript
antd中table展开行默认展示,且不需要前边的加号操作
2020/11/02 Javascript
[55:32]2018DOTA2亚洲邀请赛 4.4 淘汰赛 EG vs LGD 第二场
2018/04/05 DOTA
Python格式化css文件的方法
2015/03/10 Python
浅谈Python中的闭包
2015/07/08 Python
python解决方案:WindowsError: [Error 2]
2016/08/28 Python
Python标准库06之子进程 (subprocess包) 详解
2016/12/07 Python
如何使用python3获取当前路径及os.path.dirname的使用
2019/12/13 Python
pycharm新建Vue项目的方法步骤(图文)
2020/03/04 Python
简单html5代码获取地理位置
2014/03/31 HTML / CSS
naturalizer加拿大官网:美国娜然女鞋
2017/04/04 全球购物
送货司机岗位职责
2013/12/11 职场文书
大学生暑期实践感言
2014/02/26 职场文书
《草虫的村落》教学反思
2016/02/20 职场文书
Python Pygame实战在打砖块游戏的实现
2022/03/17 Python