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 表单下所有元素的隐藏
Jul 25 Javascript
JavaScript 变量作用域分析
Jul 04 Javascript
jquery remove方法应用详解
Nov 22 Javascript
jquery对dom的操作常用方法整理
Jun 25 Javascript
jQuery实现高亮显示的方法
Mar 10 Javascript
javascript实现瀑布流加载图片原理
Feb 02 Javascript
import与export在node.js中的使用详解
Sep 28 Javascript
五步轻松实现JavaScript HTML时钟效果
Mar 25 Javascript
Vue之Vue.set动态新增对象属性方法
Feb 23 Javascript
jquery实现自定义树形表格的方法【自定义树形结构table】
Jul 12 jQuery
vue+iview实现文件上传
Nov 17 Vue.js
JS实现选项卡插件的两种写法(jQuery和class)
Dec 30 jQuery
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 源代码压缩小工具
2009/12/22 PHP
PHP的可变变量名的使用方法分享
2012/02/05 PHP
Php header()函数语法及使用代码
2013/11/04 PHP
PHP处理JSON字符串key缺少双引号的解决方法
2014/09/16 PHP
Symfony2框架学习笔记之HTTP Cache用法详解
2016/03/18 PHP
php短信接口代码
2016/05/13 PHP
php原生数据库分页的代码实例
2019/02/18 PHP
jquery 插件学习(五)
2012/08/06 Javascript
jQuery中attr()和prop()在修改checked属性时的区别
2014/07/18 Javascript
vue组件实例解析
2017/01/10 Javascript
JS图片压缩(pc端和移动端都适用)
2017/01/12 Javascript
js cookie实现记住密码功能
2017/01/17 Javascript
JS实现touch 点击滑动轮播实例代码
2017/01/19 Javascript
js实现图片放大展示效果
2017/08/30 Javascript
详解创建自定义的Angular Schematics
2018/06/06 Javascript
Vue2.X 通过AJAX动态更新数据
2018/07/17 Javascript
angular实现input输入监听的示例
2018/08/31 Javascript
微信小程序自定义导航栏(模板化)
2019/11/15 Javascript
Element实现表格嵌套、多个表格共用一个表头的方法
2020/05/09 Javascript
如何利用nodejs实现命令行游戏
2020/11/24 NodeJs
three.js 实现露珠滴落动画效果的示例代码
2021/03/01 Javascript
[04:29]2016国际邀请赛中国区预选赛Ehome战队教练采访
2016/06/27 DOTA
[46:59]完美世界DOTA2联赛PWL S2 GXR vs Ink 第二场 11.19
2020/11/20 DOTA
python根据文件大小打log日志
2014/10/09 Python
Python fileinput模块使用实例
2015/05/28 Python
Pandas过滤dataframe中包含特定字符串的数据方法
2018/11/07 Python
如何在python中执行另一个py文件
2020/04/30 Python
Gap英国官网:Gap UK
2018/07/18 全球购物
五年级数学教学反思
2014/02/11 职场文书
挂职自我鉴定
2014/02/26 职场文书
集团公司党的群众路线教育实践活动工作总结
2014/03/03 职场文书
经典广告词大全
2014/03/14 职场文书
毕业论文答辩稿范文
2015/06/23 职场文书
AJAX实现省市县三级联动效果
2021/10/16 Javascript
Python人工智能之混合高斯模型运动目标检测详解分析
2021/11/07 Python
python中tkinter复选框使用操作
2021/11/11 Python