vue axios 表单提交上传图片的实例

 更新时间:2018年03月16日 10:01:03   作者:qq_25186543  
下面小编就为大家分享一篇vue axios 表单提交上传图片的实例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧

项目中用的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 表单提交上传图片的实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • 后台使用freeMarker和前端使用vue的方法及遇到的问题

    后台使用freeMarker和前端使用vue的方法及遇到的问题

    这篇文章主要介绍了后台使用freeMarker和前端使用vue的方法及遇到的问题,本文给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
    2019-06-06
  • 详解vue中axios的封装

    详解vue中axios的封装

    这篇文章大家分享了vue中axios的封装的相关知识点以及实例代码,有兴趣的朋友参考学习下。
    2018-07-07
  • el-form组件清除校验提示正确方法(前端技能提升)

    el-form组件清除校验提示正确方法(前端技能提升)

    el-form组件提供了表单验证的功能,可以通过在el-form上绑定rules属性,并在el-form-item上设置prop属性来进行校验,这篇文章主要给大家介绍了关于el-form组件清除校验提示正确方法(前端技能提升)的相关资料,需要的朋友可以参考下
    2023-12-12
  • Vue.js 通过jQuery ajax获取数据实现更新后重新渲染页面的方法

    Vue.js 通过jQuery ajax获取数据实现更新后重新渲染页面的方法

    今天小编小编就为大家分享一篇Vue.js 通过jQuery ajax获取数据实现更新后重新渲染页面的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-08-08
  • Vue3 响应式系统实现 computed

    Vue3 响应式系统实现 computed

    这篇文章主要介绍了 Vue3 响应式系统实现 computed,文章围绕主题展开详细的内容介绍,具有一定的参考价值,感兴趣的小伙伴可以参考一下
    2022-06-06
  • 基于vue实现8小时带刻度的时间轴根据当前时间实时定位功能

    基于vue实现8小时带刻度的时间轴根据当前时间实时定位功能

    这篇文章主要介绍了基于vue实现8小时带刻度的时间轴根据当前时间实时定位功能,开始时间、结束时间可配置,根据当前时间初始化位置,本文通过实例代码给大家介绍的非常详细,需要的朋友可以参考下
    2023-05-05
  • Vue引入jQuery的方法和配置教程

    Vue引入jQuery的方法和配置教程

    虽然Vue.js作为一个现代化的前端框架,鼓励使用其自身的响应式机制来处理DOM操作,但在某些情况下,尤其是在需要维护旧系统的项目中,可能会遇到需要引入jQuery的情况,本文将详细讲解如何在Vue项目中引入jQuery,需要的朋友可以参考下
    2024-09-09
  • Vue实现菜单切换功能

    Vue实现菜单切换功能

    这篇文章主要为大家详细介绍了Vue实现菜单切换功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-11-11
  • Vue项目引发的「过滤器」使用教程

    Vue项目引发的「过滤器」使用教程

    这篇文章主要给大家介绍了关于Vue项目引发的「过滤器」使用的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者使用vue具有一定的参考学习价值,需要的朋友们下面来一起学习学习吧
    2019-03-03
  • Vue实用功能之实现拖拽元素、列表拖拽排序

    Vue实用功能之实现拖拽元素、列表拖拽排序

    在日常开发中,特别是管理端,经常会遇到要实现拖拽排序的效果,下面这篇文章主要给大家介绍了关于Vue实用功能之实现拖拽元素、列表拖拽排序的相关资料,需要的朋友可以参考下
    2022-10-10

最新评论