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 相关文章推荐
超简单的jquery的AJAX用法
May 10 Javascript
GreyBox技术总结(转)
Nov 23 Javascript
关于scrollLeft,scrollTop的浏览器兼容性测试
Mar 19 Javascript
基于jquery中children()与find()的区别介绍
Apr 26 Javascript
js判断屏幕分辨率的代码
Jul 16 Javascript
js模拟hashtable的简单实例
Mar 06 Javascript
JavaScript中iframe实现局部刷新的几种方法汇总
Jan 06 Javascript
Angular2之二级路由详解
Aug 31 Javascript
了解前端理论:rscss和rsjs
May 23 Javascript
微信小程序自定义tabbar custom-tab-bar 6s出不来解决方案(cover-view不兼容)
Nov 01 Javascript
js实现图片上传到服务器和回显
Jan 19 Javascript
JavaScript组合设计模式--改进引入案例分析
May 23 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
一个简单的自动发送邮件系统(一)
2006/10/09 PHP
php上传、管理照片示例
2006/10/09 PHP
一个分页的论坛
2006/10/09 PHP
图解找出PHP配置文件php.ini的路径的方法
2014/08/20 PHP
php socket通信简单实现
2016/11/18 PHP
PHP开启目录引索+fancyindex漂亮目录浏览带搜索功能
2019/09/23 PHP
PHP实现新型冠状病毒疫情实时图的实例
2020/02/04 PHP
javascript Demo模态窗口
2009/12/06 Javascript
javascript权威指南 学习笔记之javascript数据类型
2011/09/24 Javascript
Javascript四舍五入Math.round()与Math.pow()使用介绍
2013/12/27 Javascript
js返回前一页刷新本页重载页面
2014/07/29 Javascript
js实现全国省份城市级联下拉菜单效果代码
2015/09/07 Javascript
js生成随机数的过程解析
2015/11/24 Javascript
AngularJS基础 ng-disabled 指令详解及简单示例
2016/08/01 Javascript
bootstrap模态框消失问题的解决方法
2016/12/02 Javascript
深入理解Node.js中的进程管理
2017/03/13 Javascript
Bootstrap面板(Panels)的简单实现代码
2017/03/17 Javascript
mui上拉加载功能实例详解
2017/04/13 Javascript
JS查找数组中重复元素的方法详解
2017/06/14 Javascript
详解vue-cli 构建项目 vue-cli请求后台接口 vue-cli使用axios、sass、swiper
2018/05/28 Javascript
详解如何配置vue-cli3.0的vue.config.js
2018/08/23 Javascript
小程序登录/注册页面设计的实现代码
2019/05/24 Javascript
layer弹出框确定前验证:弹出消息框的方法(弹出两个layer)
2019/09/21 Javascript
Python 稀疏矩阵-sparse 存储和转换
2017/05/27 Python
详解python3中zipfile模块用法
2018/06/18 Python
python将邻接矩阵输出成图的实现
2019/11/21 Python
详解Python中字符串前“b”,“r”,“u”,“f”的作用
2019/12/18 Python
Python爬虫逆向分析某云音乐加密参数的实例分析
2020/12/04 Python
详解pycharm的python包opencv(cv2)无代码提示问题的解决
2021/01/29 Python
HTML5 文件域+FileReader 分段读取文件并上传到服务器
2017/10/23 HTML / CSS
比利时网上药店: Drogisterij.net
2017/03/17 全球购物
Stokke美国官方网店:高级儿童家具、推车、汽车座椅和配件
2020/06/06 全球购物
中东最大的在线宠物店:Dubai Pet Food
2020/06/11 全球购物
小学国庆节活动方案
2014/02/11 职场文书
Python编程super应用场景及示例解析
2021/10/05 Python
angular4实现带搜索的下拉框
2022/03/25 Javascript