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 UI AutoComplete 使用说明
Jun 20 Javascript
Javascript查询DBpedia小应用实例学习
Mar 07 Javascript
js判断生效时间不得大于失效时间的思路及代码
Apr 23 Javascript
判定是否原生方法的JS代码
Nov 12 Javascript
JS脚本defer的作用示例介绍
Jan 02 Javascript
jQuery ajax分页插件实例代码
Jan 27 Javascript
AJAX实现瀑布流触发分页与分页触发瀑布流的方法
May 23 Javascript
webpack写jquery插件的环境配置
Dec 21 jQuery
详解vuex的简单todolist例子
Jul 14 Javascript
三步实现ionic3点击退出app程序
Sep 17 Javascript
VUE.CLI4.0配置多页面入口的实现
Nov 25 Javascript
vue+vant使用图片预览功能ImagePreview的问题解决
Apr 10 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
社区(php&amp;&amp;mysql)三
2006/10/09 PHP
基于CakePHP实现的简单博客系统实例
2015/06/28 PHP
33道php常见面试题及答案
2015/07/06 PHP
yii实现使用CUploadedFile上传文件的方法
2015/12/28 PHP
PHP面向对象程序设计组合模式与装饰模式详解
2016/12/02 PHP
php 生成加密公钥加密私钥实例详解
2017/06/16 PHP
js清理Word格式示例代码
2014/02/13 Javascript
jQuery.extend()、jQuery.fn.extend()扩展方法示例详解
2014/05/08 Javascript
JavaScript实现弹出模态窗体并接受传值的方法
2016/02/12 Javascript
Jquery Easyui选项卡组件Tab使用详解(10)
2016/12/18 Javascript
Bootstrap 3 进度条的实现
2017/02/22 Javascript
Vue.js 单页面多路由区域操作的实例详解
2017/07/17 Javascript
详解Vue-cli3 项目在安卓低版本系统和IE上白屏问题解决
2019/04/14 Javascript
Vue render函数实战之实现tabs选项卡组件
2019/04/22 Javascript
vue + axios get下载文件功能
2019/09/25 Javascript
Vue开发中常见的套路和技巧总结
2020/11/24 Vue.js
[46:43]DOTA2上海特级锦标赛D组小组赛#1 EG VS COL第三局
2016/02/28 DOTA
Python multiprocessing.Manager介绍和实例(进程间共享数据)
2014/11/21 Python
Python中利用sorted()函数排序的简单教程
2015/04/27 Python
利用Python读取txt文档的方法讲解
2018/06/23 Python
python多线程并发让两个LED同时亮的方法
2019/02/18 Python
python从入门到精通 windows安装python图文教程
2019/05/18 Python
Python整数对象实现原理详解
2019/07/01 Python
PyTorch中model.zero_grad()和optimizer.zero_grad()用法
2020/06/24 Python
python怎么判断素数
2020/07/01 Python
详解python程序中的多任务
2020/09/16 Python
SpringBoot首页设置解析(推荐)
2021/02/11 Python
高中毕业生自我鉴定范文
2013/09/26 职场文书
大学生思想汇报范文
2013/12/31 职场文书
写给女朋友的检讨书
2014/01/28 职场文书
家庭贫困证明书(3篇)
2014/09/15 职场文书
公司授权委托书样本
2014/09/15 职场文书
党的群众路线剖析材料
2014/10/09 职场文书
酒店服务员岗位职责
2015/02/09 职场文书
会计专业自荐信范文
2019/05/22 职场文书
Java后端 Dubbo retries 超时重试机制的解决方案
2022/04/14 Java/Android