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 相关文章推荐
判断及设置浏览器全屏模式
Apr 20 Javascript
html5+javascript制作简易画板附图
Apr 25 Javascript
JavaScript中使用typeof运算符需要注意的几个坑
Nov 08 Javascript
jquery的总体架构分析及实现示例详解
Nov 08 Javascript
判断数组的最佳方法(推荐)
Oct 11 Javascript
two.js之实现动画效果示例
Nov 06 Javascript
vue项目实战总结篇
Feb 11 Javascript
通过函数作用域和块级作用域看javascript的作用域链
Aug 05 Javascript
使用Node.js实现一个多人游戏服务器引擎
Mar 13 Javascript
jQuery实现文本显示一段时间后隐藏的方法分析
Jun 20 jQuery
JS实现简单随机3D骰子
Oct 24 Javascript
vue实现水波涟漪效果的点击反馈指令
May 31 Vue.js
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
漂亮但不安全的CTB
2006/10/09 PHP
php 生成文字png图片的代码
2011/04/17 PHP
php中二分法查找算法实例分析
2016/09/22 PHP
PHP类型约束用法示例
2016/09/28 PHP
php 开发中加密的几种方法总结
2017/03/22 PHP
PHP封装XML和JSON格式数据接口操作示例
2019/03/06 PHP
jQuery 创建Dom元素
2010/05/07 Javascript
jquery与prototype框架的详细对比
2013/11/21 Javascript
jquery跨域请求示例分享(jquery发送ajax请求)
2014/03/25 Javascript
JavaScript实现找出字符串中第一个不重复的字符
2014/09/03 Javascript
简介JavaScript中strike()方法的使用
2015/06/08 Javascript
jQuery实现的倒计时效果实例小结
2016/04/16 Javascript
Bootstrap网格系统详解
2016/04/26 Javascript
JavaScript实现前端实时搜索功能
2020/03/26 Javascript
JavaScript模板引擎应用场景及实现原理详解
2018/12/14 Javascript
vue实现form表单与table表格的数据关联功能示例
2019/01/29 Javascript
JS为什么说async/await是generator的语法糖详解
2019/07/11 Javascript
纯异步nodejs文件夹(目录)复制功能
2019/09/03 NodeJs
layui上传图片到服务器的非项目目录下的方法
2019/09/26 Javascript
在vscode 中设置 vue模板内容的方法
2020/09/02 Javascript
js删除指定位置超链接中含有百度与360的标题
2021/01/06 Javascript
将Python代码打包为jar软件的简单方法
2015/08/04 Python
python3中函数参数的四种简单用法
2018/07/09 Python
Django实现学员管理系统
2019/02/26 Python
Python paramiko 模块浅谈与SSH主要功能模拟解析
2020/02/29 Python
python实现贪吃蛇双人大战
2020/04/18 Python
英语专业学生个人求职信范文
2014/01/06 职场文书
主题婚礼策划方案
2014/02/10 职场文书
乡镇干部十八大感言
2014/02/17 职场文书
保卫科工作岗位职责
2014/03/01 职场文书
预备党员入党自我评价范文
2014/03/10 职场文书
工商局局长个人对照检查材料思想汇报
2014/09/23 职场文书
初中英语教师个人工作总结
2015/02/09 职场文书
2015年小学语文教学工作总结
2015/05/25 职场文书
校园安全主题班会
2015/08/12 职场文书
2016年学校党支部公开承诺书
2016/03/25 职场文书