handleSave() {
const formData = new FormData();
/* eslint-disable */
for (let key in this.dataInfo) {
if (Object.prototype.hasOwnProperty.call(this.dataInfo, key)) {
formData.append(key, this.dataInfo[key]);
}
}
let para = {
headers: {'content-type': 'multipart/form-data'},
style: "styleType",
path : "paths",
city : 1
};
this.$http.post('http://img.zeju.cn/zejuimg/img/upload', formData, para)
.then((res) => {
console.log(res);
});
},

  

<el-upload
class="avatar-uploader"
   action=""
:show-file-list="false"
:on-success="handleAvatarSuccessLogoPc"
:on-error="handleAvatarErrorLogoPc"
:on-progress="handleProgressLogoPc"
:before-upload="beforeUploadLogoPc"
:http-request="handleSave">
<img v-if="imageUrlLogoPc" :src="data:imageUrlLogoPc" class="avatar">
<i v-else class="el-icon-plus avatar-uploader-icon" ref="plusIcon"></i>
<p id="bottomPc" style="position: absolute;bottom: 0;background: rgba(0,0,0,.3);color:#fff;width: 100%;margin: 0;padding: 5px;">点击上传图片</p>
<el-progress v-show="showFlagLogoPc" type="circle" :percentage="progressingLogoPc" :status="statusLogoPc" style="position: absolute;top:10%;left:15%;" ></el-progress>
</el-upload>

  

  

vue-update-表单形式复写方法上传图片的更多相关文章

  1. vue中的表单异步校验方法封装

    在vue项目的开发中,表单的验证必不可少,在开发的过程中,用的是vue+iview的一套,我们知道iview的表单验证是基于async-validator,对于async-validator不熟悉的可 ...

  2. java中的http请求的封装(GET、POST、form表单形式)

    目前JAVA实现HTTP请求的方法用的最多的有两种:一种是通过HTTPClient这种第三方的开源框架去实现.HTTPClient对HTTP的封装性比较不错,通过它基本上能够满足我们大部分的需求,Ht ...

  3. Vue.js表单校验;动画指令;避免内存泄露。

    Vue.js表单校验: 动画指令:创建自定义的滚动指令. 避免内存泄露. 避免内存泄露 在单页面应用开发时SPA,用户无需刷新浏览器.所以javascript应用需要自行清理组件来防止内存占用不断增长 ...

  4. 表单提交Post方法、Get方法

     表单用来接受用户的输入,并将用户的输入以“name=value值对”集合的形式提交到服务器进行处理.那么表单是怎样将数据提交到服务器的?服务器是怎样对表单数据进行处理的?下面我将为大家揭开表单提交背 ...

  5. vue的表单编辑删除,保存取消功能

    过年回来第一篇博客,可能说的不是很清楚,而且心情可能也不是特别的high,虽然今天是元宵,我还在办公室11.30在加班,但就是想把写过的代码记下来,怕以后可能真的忘了.(心将塞未塞,欲塞未满) VUE ...

  6. html中form表单的使用方法和介绍

    from表单的使用方法 一.表单赏析 二.了解表单功能:用于搜集不同类型的用户输入的内容 有了表单,网页的内容可以由用户自己创建,那么对于网页来说,我们既是网页创建都者,也是网页的消费者. 三.常用的 ...

  7. JavaScript表单序列化的方法详解

    本文介绍下,在javascript中实现表单序列化的方法,通过实例加深理解,有需要的朋友参考下吧. 在JavaScript中,可以利用表单字段的type属性,连同name和value属性一起实现对表单 ...

  8. 12.Vue.js 表单

    这节我们为大家介绍 Vue.js 表单上的应用. 你可以用 v-model 指令在表单控件元素上创建双向数据绑定. <div id="app"> <p>in ...

  9. vue form表单绑定事件与方法

    使用v-on绑定事件 <button @click="hello">Hello</button><br /> <button @click ...

随机推荐

  1. Linux命令 sed

    一. 以行为单位进行操作. d:删除 $ nl passwd | sed '2,5d'  # 删除第2~5行 $ nl passwd | sed '2d'  # 删除第2行 $ nl passwd | ...

  2. vs防止编译不能连接生成pdb文件

    问题的原因:debug和release版本生成的目标文件名称(Target Name)都一样,所以导致链接失败:

  3. qemu对虚拟机的内存管理(二)

    上篇文章主要分析了qemu中对虚拟机内存管理的关键数据结构及他们之间的联系,这篇文章则主要分析在地址空间发生变化时,如何将其更新至KVM中,保持用户空间与内核空间的同步. 这一系列操作与之前说的Add ...

  4. iis7下url重写后,已存在的html不能访问了(未能执行URL)的解决方法

    iis7下url重写后,原本存在的html不能访问了,未能执行URL(asp.net对真正的.html(但不符合重写规的)就不知道如何处理了),遇到类似情况的朋友可以参考下   当把.html的url ...

  5. cocos2d-x在Android上的编译过程(3):简化Android.mk文件的编写

    在编译动态库时.要求我们要去编写jni/Android.mk文件.告诉编译器编译出来的库时应包括包括编译文件和其它引用库.但对于一个大项目来说,维护这个文件肯定是一件比較繁琐的事情.由于每加一个文件或 ...

  6. java框架之SpringCloud(3)-Eureka服务注册与发现

    在上一章节完成了一个简单的微服务案例,下面就通过在这个案例的基础上集成 Eureka 来学习 Eureka. 介绍 概述 Eureka 是 Netflix 的一个子模块,也是核心模块之一.Eureka ...

  7. solr6.5.1搜索引擎的部署

    目录结构如下: 6.5.1版本的solr已经集成有jetty服务器(在server目录下),所以可以直接启动solr应用. 1.java环境配置好(这里不再累赘). 2.打开cmd,路径切换到bin目 ...

  8. 这10个Python项目超有趣!

    前言: Python可谓是现在很多人正在学或者想学的一个脚本语言了,提到学习自然就少不了拿项目练手,可是一般的项目根本提不起兴趣嘛,这10个项目可是非常有趣的,不信你看看. [Python 图片转字符 ...

  9. 笔记-ASP.NET WebApi

    本文是针对ASP.NET WepApi 2 的笔记. Web API 可返回的结果: 1.void 2.HttpResponseMessage 3.IHttpActionResult 4.其他类型 返 ...

  10. VCS

    timing check相关的, +notimingcheck命令,可以用在compile时,也可以用在run time的时候, 都是将检查timing的系统函数,都disable掉了, 加在comp ...