<!-- 上传组件 -->
<!-- 总结一下:
action 写图片上传请求的路径 去路径哈
show-file-list就是当你上传时,是否会显示出上传的是哪一个图片,一般为false
handleAvatarSuccess它是成功的回调
beforeAvatarUpload:上传之前做的一些事情
在本页面中你不点击按钮 图片也会显示出来 element-ui中的上传组件 在action时,写了上传地址,当你选择好图片,就自动帮你上传了
<template>
<div> <el-upload
class="avatar-uploader"
action="http://127.0.0.1:666/login/upload"
:show-file-list="false"
:on-success="handleAvatarSuccess"
:before-upload="beforeAvatarUpload"
>
<img v-if="avatarUrl" :src="avatarUrl" class="avatar" /> <i v-else class="el-icon-plus avatar-uploader-icon"></i>
</el-upload>

//在本页面中你不点击按钮 图片也会显示出来
<el-button @click="saveAvatar">获取图片请求</el-button> <!-- 图片回显示 比如它回显在顶部头像,我放在这里是方便演示-->
<div class="avatar">
<img width="100%" height="100%" :src="avatarUrl" alt />
</div>
</div>
</template>
<script>
export default {
data() {
return {
avatarUrl: "http://127.0.0.1:8080/avatar.jpg" //默认头像
};
},
methods: {
// 上传成功的函数
handleAvatarSuccess(res, file) {
// 上传成功 回显图片
this.avatarUrl = URL.createObjectURL(file.raw);
console.log(URL.createObjectURL(file.raw));
}, // 上传之前的限制函数
beforeAvatarUpload(file) {
// 类型
const isJPG = file.type === "image/jpeg";
// 大小
const isLt2M = file.size / 1024 / 1024 < 2;
// 类型限制
if (!isJPG) {
this.$message.error("上传头像图片只能是 JPG 格式!");
}
// 大小限制
if (!isLt2M) {
this.$message.error("上传头像图片大小不能超过 2MB!");
}
return isJPG && isLt2M;
}, // 回去头像的请求
getAvatar() {
this.req
.get("/login/getavatar")
.then(response => {
let data = response.data;
this.avatarUrl =
"http://127.0.0.1:666" + data[data.length - 1].imgUrl;
// console.log(data[data.length - 1].imgUrl);
})
.catch(err => {
console.log(err);
});
}
},
created() {
// 获取头像
this.getAvatar();
}
};
</script>
<style lang="less" scoped>
.avatar-uploader .el-upload {
border: 1px dashed #d9d9d9;
border-radius: 6px;
cursor: pointer;
position: relative;
overflow: hidden;
}
.avatar-uploader .el-upload:hover {
border-color: #409eff;
}
.avatar-uploader-icon {
font-size: 28px;
color: #8c939d;
width: 178px;
height: 178px;
line-height: 178px;
text-align: center;
}
.avatar {
width: 178px;
height: 178px;
display: block;
}
</style>

vue 借用element-ui实现头像上传 axios发送请求的更多相关文章

  1. Vue+Element UI 实现视频上传

    一.前言 项目中需要提供一个视频介绍,使用户能够快速.方便的了解如何使用产品以及注意事项. 前台使用Vue+Element UI中的el-upload组件实现视频上传及进度条展示,后台提供视频上传AP ...

  2. vue+element+upload实现头像上传

    后台 @RequestMapping("/up") public JSONObject up(@RequestParam("picFile") Multipar ...

  3. element ui实现手动上传文件,且只能上传单个文件,并能覆盖上传。

    element ui提供了成熟的组件场景,但实际工作中难免会遇到认(sha)真(diao)的产品.比如,最近遇到的,要求实现手动上传特定格式文件(用户点击“上传文件”按钮,确定之后,只是单纯选择了文件 ...

  4. Element UI中的上传文件功能

    上传文件给后台: <el-upload style="display:inline-block" :limit=" class="upload-demo& ...

  5. vue头像上传与文件压缩

    工作中遇到的问题记录:vue开发头像上传组件,后端提供接口,需求为可相册上传,可相机拍摄上传,文件大小限制为2M 需求点分析 移动端调用相册/摄像头实现拍照 图片压缩,当前高像素的相机拍出来的图片都有 ...

  6. PHP+ajaxfileupload与jcrop插件结合 完成头像上传

    昨天花了点时间整合了一下头像插件 东拼西凑的成果 先来看下效果

  7. 【javascript】html5中使用canvas编写头像上传截取功能

    [javascript]html5中使用canvas编写头像上传截取功能 本人对canvas很是喜欢,于是想仿照新浪微博头像上传功能(前端使用canvas) 本程序目前在谷歌浏览器和火狐浏览器测试可用 ...

  8. Canvas处理头像上传

    未分类 最近社区系统需要支持移动端,其中涉及到用户头像上传,头像有大中小三种尺寸,在PC端,社区用Flash来处理头像编辑和生成,但该Flash控件的界面不友好而且移动端对Flash的支持不好,考虑到 ...

  9. jquery头像上传剪裁插件cropper的前后台demo

    因为一个项目要做一个头像上传的功能,因此选择了使用jquery的头像插件cropper,cropper是一款使用简单且功能强大的图片剪裁jQuery插件,但是在使用的时候,有一个很大的坑需要注意,那就 ...

随机推荐

  1. python网络爬虫之解析网页的BeautifulSoup(爬取电影图片)[三]

    目录 前言 一.BeautifulSoup的基本语法 二.爬取网页图片 扩展学习 后记 前言 本章同样是解析一个网页的结构信息 在上章内容中(python网络爬虫之解析网页的正则表达式(爬取4k动漫图 ...

  2. 一起学Spring之AOP

    概述 在软件开发中,我们重点关注的是业务逻辑代码,但在实际开发中,需要写的代码却不仅仅是业务逻辑,还需要处理记录日志,异常处理,事务控制等一些与业务无关的事情.而且这些代码也是服务端必须的,类似这样的 ...

  3. iOS----------jenkins

    错误日志: ERROR: Error fetching remote repo 'origin' Finished: FAILURE ERROR: Error cloning remote repo ...

  4. Oracle DB Time

    Oracle DB Time是Oracle数据库在时间维度上剖析性能的一个重要指标,通过逐级分解该指标,定位到浪费资源或者资源争用的首要事件上,从而通过减少等待以及最小化每个请求的使用资源来达到优化的 ...

  5. OGG For Oracle To PostgreSQL

    本文档描述OGG(Oracle goldengate)为Oracle同步到PostgreSQL数据库配置.在目前去“IOE”潮流.PostgreSQL确实是Oracle最好的替代品之一. 实验环境如下 ...

  6. [MySQL] 使用force index强制使用索引

    1.在测试一个按照时间的范围查询时,尽管增加了索引,发现使用不到索引,可以使用这个来强制使用索引 测试过程为,创建下面的表,以及创建了联合索引 create table delay_delete_us ...

  7. Matlab线性规划

    线性规划   线性规划的标准形式 \[\underset{x}{min}{\ c^Tx}\ s.t.\ Ax \leqslant b\]   例如,线性规划为: \[ \underset{x}{min ...

  8. android 启动流程 相关2 init进程 属性服务

    Init属性服务 系统属性服务 属性梳理 来源和读取时机 来源:内核参数 ro.kernel.*   代表有qemu内核参数才会设置(在虚拟机中) ro.boot.*     1.内核设备树相关的设备 ...

  9. 这可能是最漂亮的Spring事务管理详解

    事务概念回顾 什么是事务? 事务是逻辑上的一组操作,要么都执行,要么都不执行. 事物的特性(ACID): 原子性: 事务是最小的执行单位,不允许分割.事务的原子性确保动作要么全部完成,要么完全不起作用 ...

  10. 数据、模型、IT系统认知

    数据.模型.IT系统认知 量化投资定义 量化投资主要是指通过数理模型来实现投资理念,由计算机产生交易策略的一种投资方法. 量化投资是一种方法论,而不是具体的交易策略. 通常与基本面.技术面分析相结合. ...