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的让页面控件不可用的实现代码
Apr 27 Javascript
JavaScript之HTMLCollection接口代码
Apr 27 Javascript
javascript中负数算术右移、逻辑右移的奥秘探索
Oct 17 Javascript
javascript打印html内容功能的方法示例
Nov 28 Javascript
Jquery 过滤器(first,last,not,even,odd)的使用
Jan 22 Javascript
javascript匿名函数应用示例介绍
Mar 07 Javascript
输入框过滤非数字的js代码
Sep 18 Javascript
无需 Flash 使用 jQuery 复制文字到剪贴板
Apr 26 Javascript
利用JavaScript在网页实现八数码启发式A*算法动画效果
Apr 16 Javascript
Vue项目pdf(base64)转图片遇到的问题及解决方法
Oct 19 Javascript
vue无限轮播插件代码实例
May 10 Javascript
jquery validate 实现动态增加/删除验证规则操作示例
Oct 28 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
无线电的诞生过程
2021/03/01 无线电
PHP memcache扩展的三种安装方法
2009/04/26 PHP
php下把数组保存为文件格式的实例应用
2010/02/08 PHP
解析yahoo邮件用phpmailer发送的实例
2013/06/24 PHP
PHP+APACHE实现网址伪静态
2015/02/22 PHP
Linux下编译redis和phpredis的方法
2016/04/07 PHP
PHP完全二叉树定义与实现方法示例
2017/10/09 PHP
基于jquery的划词搜索实现(备忘)
2010/09/14 Javascript
JavaScript定义类和对象的方法
2014/11/26 Javascript
jquery实现拖动效果(代码分享)
2017/01/25 Javascript
原生js实现轮播图
2017/02/27 Javascript
jQuery获取table下某一行某一列的值实现代码
2017/04/07 jQuery
JS交互点击WKWebView中的图片实现预览效果
2018/01/05 Javascript
详解如何配置vue-cli3.0的vue.config.js
2018/08/23 Javascript
微信小程序适配iphoneX的实现方法
2018/09/18 Javascript
js中offset,client , scroll 三大元素知识点总结
2019/09/11 Javascript
vue开发简单上传图片功能
2020/06/30 Javascript
详解ES6实现类的私有变量的几种写法
2021/02/10 Javascript
python实现k均值算法示例(k均值聚类算法)
2014/03/16 Python
Python中的默认参数详解
2015/06/24 Python
详解Python中的__getitem__方法与slice对象的切片操作
2016/06/27 Python
Python探索之创建二叉树
2017/10/25 Python
Python进阶之@property动态属性的实现
2019/04/01 Python
python ftplib模块使用代码实例
2019/12/31 Python
涂鸦板简单实现 Html5编写属于自己的画画板
2016/07/05 HTML / CSS
施华洛世奇德国官网:SWAROVSKI德国
2017/02/01 全球购物
adidas菲律宾官网:adidas PH
2020/02/07 全球购物
实习生自我评价
2014/01/18 职场文书
学生拾金不昧表扬信
2014/01/21 职场文书
四年级数学教学反思
2014/02/02 职场文书
品牌宣传方案
2014/03/21 职场文书
党支部三会一课计划
2014/09/24 职场文书
人力资源部岗位职责
2015/02/11 职场文书
python3美化表格数据输出结果的实现代码
2021/04/14 Python
Python中的套接字编程是什么?
2021/06/21 Python
MySQL8.0 Undo Tablespace管理详解
2022/06/16 MySQL