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 相关文章推荐
IE autocomplete internet explorer's autocomplete
Jun 30 Javascript
ajax不执行success回调而是执行了error回调
Dec 10 Javascript
JS小游戏之极速快跑源码详解
Sep 25 Javascript
Javascript URI 解析介绍
Mar 15 Javascript
jQuery中extend函数详解
Jul 13 Javascript
Bootstrap popover用法详解
Dec 22 Javascript
深入理解js中的加载事件
Feb 08 Javascript
JavaScript字符串_动力节点Java学院整理
Jun 27 Javascript
使用vue实现简单键盘的示例(支持移动端和pc端)
Dec 25 Javascript
Vue将页面导出为图片或者PDF
Aug 17 Javascript
微信小程序之侧边栏滑动实现过程解析(附完整源码)
Aug 23 Javascript
jquery实现手风琴案例
May 04 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文件操作的详细诠释
2013/06/21 PHP
PHP合并数组函数array_merge用法分析
2017/02/17 PHP
laravel高级的Join语法详解以及使用Join多个条件
2019/10/16 PHP
用JavaScrpt实现文件夹简单轻松加密的实现方法图文
2008/09/08 Javascript
基于jquery的一个简单的脚本验证插件
2010/04/05 Javascript
jquery通过closest选择器修改上级元素的方法
2015/03/17 Javascript
Angular的MVC和作用域
2016/12/26 Javascript
nodejs实例解析(输出hello world)
2017/01/03 NodeJs
有关JS中的0,null,undefined,[],{},'''''''',false之间的关系
2017/02/14 Javascript
浅谈angular2 组件的生命周期钩子
2017/08/12 Javascript
基于JS实现web端录音与播放功能
2019/04/17 Javascript
layui自定义验证,用ajax查询后台是否有重复数据,form.verify的例子
2019/09/06 Javascript
小程序实现左滑删除的效果的实例代码
2020/10/19 Javascript
python strip()函数 介绍
2013/05/24 Python
Python开发实例分享bt种子爬虫程序和种子解析
2014/05/21 Python
在Python中使用M2Crypto模块实现AES加密的教程
2015/04/08 Python
python生成随机密码或随机字符串的方法
2015/07/03 Python
使用Python的Flask框架来搭建第一个Web应用程序
2016/06/04 Python
利用Python开发实现简单的记事本
2016/11/15 Python
一步步教你用Python实现2048小游戏
2017/01/19 Python
Python用 KNN 进行验证码识别的实现方法
2018/02/06 Python
Python利用Django如何写restful api接口详解
2018/06/08 Python
解决pycharm运行程序出现卡住scanning files to index索引的问题
2019/06/27 Python
详解python实现小波变换的一个简单例子
2019/07/18 Python
在Python中os.fork()产生子进程的例子
2019/08/08 Python
python+adb+monkey实现Rom稳定性测试详解
2020/04/23 Python
表彰先进的通报
2014/01/31 职场文书
四年级数学教学反思
2014/02/02 职场文书
电钳工人个人求职信
2014/05/10 职场文书
物理系毕业生自荐书
2014/06/13 职场文书
临床专业自荐信
2014/06/22 职场文书
代领报检证委托书范本
2014/10/11 职场文书
担保书格式
2015/01/20 职场文书
高考升学宴答谢词
2015/01/20 职场文书
工伤事故赔偿协议书
2015/08/06 职场文书
JS封装cavans多种滤镜组件
2022/02/15 Javascript