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

您可能感兴趣的文章:

  • 基于VUE选择上传图片并页面显示（图片可删除）
  • vue.js 上传图片实例代码
  • 基于vue+ bootstrap实现图片上传图片展示功能
  • VUE axios上传图片到七牛的实例代码
  • vuejs使用FormData实现ajax上传图片文件
  • vue上传图片组件编写代码
  • vue.js获取数据库数据实例代码
  • vue实现的上传图片到数据库并显示到页面功能示例
赞 (0)

相关推荐

  • vue上传图片组件编写代码

    vue上传图片组件编写代码

    本文实例教大家如何编写一个vue上传图片组件,具体如下 1.首先得有一个[type=file]文件标签并且隐藏,changge事件来获取图片: <input @change="fileChange($event)" type="file" id="upload_file" multiple style="display: none"/> 2.触发隐藏的文件标签:(通过原生的click来触发) document.ge

  • 基于vue+ bootstrap实现图片上传图片展示功能

    基于vue+ bootstrap实现图片上传图片展示功能

    效果图如下所示: html ..... ....... <-- key=idPicUrl --> <div class="col-sm-7" > <img :src="queryFirmInfo[key]" alt="" style="max-height:200px;max-width:250px" class="myimage" :name="key"

  • 基于VUE选择上传图片并页面显示（图片可删除）

    基于VUE选择上传图片并页面显示（图片可删除）

    基于VUE选择上传图片并在页面显示,图片可删除,具体内容如下 demo例子: 依赖文件:jqueryform HTML文本内容: <template> <div id="accident"> <div class="wrapper"> <i class="icon-pic"></i>相关照片 <button type="button" @click="

  • vue.js获取数据库数据实例代码

    vue.js动态获取数据库数据 (通过vue.cli和webpack搭建的环境) 1.首先我先在创建一个静态的data.json文件,在static下创建json文件夹,(webpack环境下,静态的文件放在static目录下) { "data":[ {"id":1,"name": "yidong", "age": "11" }, {"id":2,"name

  • VUE axios上传图片到七牛的实例代码

    浏览器上传图片到服务端,我用过两种方法: 1.本地图片转换成base64,然后通过普通的post请求发送到服务端. 操作简单,适合小图,以及如果想兼容低版本的ie没办法用此方法 2.通过form表单提交. form表单提交图片会刷新页面,也可以时form绑定到一个隐藏的iframe上,可以实现无刷新提交数据.但是如果想传输多条form表单数据,需要写很多dom,同时还要写iframe,太麻烦. 目前感觉比较干净的办法就是通过axios的post请求,发送form数据到后台. html部分,至于界

  • vue实现的上传图片到数据库并显示到页面功能示例

    本文实例讲述了vue实现的上传图片到数据库并显示到页面功能.分享给大家供大家参考,具体如下: 1.点击上传图片,弹出选择图片选项框. 页面代码: <div class="form-signin-heading" id="btnUpload" @change="upload">上传图片</div> <input type="file" name="avatar" id="

  • vuejs使用FormData实现ajax上传图片文件

    vuejs使用FormData实现ajax上传图片文件

    我相信很多使用vuejs的朋友,都有采用ajax上传图片的需求,因为前后端分离后,我们希望都能用ajax来解决数据问题,传统的表单提交会导致提交成功后页面跳转,而使用ajax能够无刷新上传图片等文件. 其实已经有朋友封装了相关的npm包,但是我想说用原生的js api来实现,也用不了多少代码,而且更灵活,能使用原生就尽量用原生.接下来就以一个简单的头像上传来说明如何使用. 效果图 前端实现 <template> <div class="admin"> <d

  • vue.js 上传图片实例代码

    最近爱上了用vue.js做前端,昨天用vue上传图片时遇到了问题,最后半天时间终于摸索出来,我将相关部分的代码贴出来. 前端部分 <div class="form-group"> <label>背景图</label> <input type="file" class="form-control" @change="onFileChange"> </div> <d

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

    项目中用的element 的框架,然后在项目有一个添加数据需求是图片可上传,也可不上传, 然后问题就是element 中的上传控件在没有图片的时候是不会触发提交的,但接口写的是有file的  multipart/form-data    接收模式 所有只能自己另个模仿一个表单上传 <input class="file" name="file" type="file" accept="image/png,image/gif,imag

  • vue form 表单提交后刷新页面的方法

    最近做的项目中,有增删改表格功能,在操作后需要实时更新页面数据.下面可以这样解决. 1.在methods中 定义好一个初始化渲染实例. 例如 lnitializationData(){//初始化页面数据 this.$http.get("/permit/specific", { params: { page: this.localPage, size: this.msg.pagNumber, } }, {emulateJSON: true} ).then((response) =>

  • Vue form 表单提交+ajax异步请求+分页效果

    废话不多说了,直接给大家贴代码了,具体代码如下所示: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1"> <meta charset="UTF-

  • jquery按回车键实现表单提交的简单实例

    本文章在给大家介绍在用户输入完信息之后直接按回车进行表单提交的jquery实现方法,有需要了解的朋友可进来参考以. 键盘事件有3: jquery键盘事件参考: 1.keydown() keydown事件会在键盘按下时触发. 2.keyup() keyup事件会在按键释放时触发,也就是你按下键盘起来后的事件 3.keypress() keypress事件会在敲击按键时触发,我们可以理解为按下并抬起同一个按键 正确代码为: $(document).keyup(function(event){ if(

  • Vue自定义表单内容检查rules实例

    Vue自定义表单内容检查rules实例

    先看个例子 组件 <el-form-item label="手机号:" prop="phone_number"> <el-input v-model="formPerson.phone_number"></el-input> </el-form-item> script中 export default { data() { var validateMobilePhone = (rule, value

  • php表单提交与$_POST实例分析

    php表单提交与$_POST实例分析

    本文实例分析了php的表单提交与$_POST.分享给大家供大家参考.具体如下: 这里要注意:表单 checkbox 的 name 需要以数组形式来命名. 表单文件:index.php 复制代码 代码如下: <form action="b.php" method="post"> 用户名:<input type="text" name="username"><br /> 密码:<input

  • vue elementUI 表单嵌套验证的实例代码

    一:表单一级验证 element中from组件内表单验证通过使用el-form标签,绑定model和rules属性进行表单验证 <el-form ref="form" :model="form" :rules="rules" label-width="110px" @submit.native.prevent> <el-form-item label="客户名称:" size="

  • vue自动化表单实例分析

    vue自动化表单实例分析

    背景 B端系统表单较多,且表单可能含有较多字段 字段较多的表单带来了大片HTML代码 在大片HTML中,混杂着参数绑定.事件处理等逻辑,不利于维护 技术栈 Vue,Element(默认表单布局)适合中后台项目快速开发 目标 通过json配置快速生成表单的vue plugin. 设计目标 减少html 重复片段 表单字段组件可扩展 事件.联动通过eventbus 解耦 校验可扩展 表单布局可自定义 可视化配置 大概方案设计 使用 安装 npm install charlie-autoform ch

  • Vue表单提交点击事件只允许点击一次的实例

    常用出现场景:商城点击订单提交 1.使用Vue封装事件 body: <template> <div> <el-button @click.once="submitOrder()">提交订单</el-button> </div> </template> 方法: methods: { submitOrder() { // 处理逻辑 } } 2.使用原生JS事件 在数据data里面声明一个flag属性 data() {

  • php+html5使用FormData对象提交表单及上传图片的方法

    php+html5使用FormData对象提交表单及上传图片的方法

    本文实例讲述了php+html5使用FormData对象提交表单及上传图片的方法.分享给大家供大家参考.具体分析如下: FormData 对象,可以把form中所有表单元素的name与value组成一个queryString,提交到后台.在使用Ajax提交时,使用FormData对象可以减少拼接queryString的工作量. 使用FormData对象 1.创建一个FormData空对象,然后使用append方法添加key/value 复制代码 代码如下: var formdata = new

随机推荐