Vue2 若依框架头像上传 全部代码

 

 

<template><div><div class="user-info-head" @click="editCropper()"><img v-bind:src="options.img" title="点击上传头像"class="img-circle img-lg" /></div><el-dialog :title="title" :visible.sync="open" width="800px" append-to-body @opened="modalOpened"@close="closeDialog"><el-row><!-- 左侧裁剪工具 --><el-col :xs="24" :md="12" :style="{ height: '350px' }"><vue-cropper ref="cropper" :img="options.img" :info="true" :autoCrop="options.autoCrop":autoCropWidth="options.autoCropWidth" :autoCropHeight="options.autoCropHeight" :fixedBox="options.fixedBox":outputType="options.outputType" @realTime="realTime" v-if="visible" /></el-col><!-- 右侧才裁剪后图片 --><el-col :xs="24" :md="12" :style="{ height: '350px' }"><div class="avatar-upload-preview"><img :src="previews.url" :style="previews.img" /></div></el-col></el-row><br /><el-row><!-- 上传按钮-上传 --><el-col :lg="2" :sm="3" :xs="3"><el-upload action="#" :http-request="requestUpload" :show-file-list="false" :before-upload="beforeUpload"><el-button size="small">选择<i class="el-icon-upload el-icon--right"></i></el-button></el-upload></el-col><!-- 放大 --><el-col :lg="{ span: 1, offset: 2 }" :sm="2" :xs="2"><el-button icon="el-icon-plus" size="small" @click="changeScale(1)"></el-button></el-col><!-- 缩小 --><el-col :lg="{ span: 1, offset: 1 }" :sm="2" :xs="2"><el-button icon="el-icon-minus" size="small" @click="changeScale(-1)"></el-button></el-col><!-- 逆时针旋转 --><el-col :lg="{ span: 1, offset: 1 }" :sm="2" :xs="2"><el-button icon="el-icon-refresh-left" size="small" @click="rotateLeft()"></el-button></el-col><!-- 顺时针旋转 --><el-col :lg="{ span: 1, offset: 1 }" :sm="2" :xs="2"><el-button icon="el-icon-refresh-right" size="small" @click="rotateRight()"></el-button></el-col><!-- 保存头像 --><el-col :lg="{ span: 2, offset: 6 }" :sm="2" :xs="2"><el-button type="primary" size="small" @click="uploadImg()">提 交</el-button></el-col></el-row></el-dialog></div>
</template><script>
import store from "@/store";
import { VueCropper } from "vue-cropper"; //裁剪工具
import { uploadAvatar } from "@/api/system/user";export default {components: { VueCropper },data() {return {// 是否显示弹出层open: false,// 是否显示croppervisible: false,// 弹出层标题title: "修改头像",options: {img: store.getters.avatar, //裁剪图片的地址autoCrop: true, // 是否默认生成截图框autoCropWidth: 200, // 默认生成截图框宽度autoCropHeight: 200, // 默认生成截图框高度fixedBox: true, // 固定截图框大小 不允许改变outputType: "png" // 默认生成截图为PNG格式},previews: {},resizeHandler: null};},methods: {// 编辑头像editCropper() {this.open = true;},// 打开弹出层结束时的回调modalOpened() {this.visible = true;window.addEventListener("resize", this.resizeHandler)},// 刷新组件refresh() {this.$refs.cropper.refresh();},// 覆盖默认的上传行为requestUpload() {},// 向左旋转rotateLeft() {this.$refs.cropper.rotateLeft();},// 向右旋转rotateRight() {this.$refs.cropper.rotateRight();},// 图片缩放changeScale(num) {num = num || 1;this.$refs.cropper.changeScale(num);},// 上传预处理beforeUpload(file) {if (file.type.indexOf("image/") == -1) {this.$modal.msgError("文件格式错误,请上传图片类型,如:JPG,PNG后缀的文件。");} else {const reader = new FileReader();reader.readAsDataURL(file);reader.onload = () => {this.options.img = reader.result;};}},// 上传图片uploadImg() {this.$refs.cropper.getCropBlob(data => {let formData = new FormData();formData.append("avatarfile", data);uploadAvatar(formData).then(response => {this.open = false;this.options.img = process.env.VUE_APP_BASE_API + response.imgUrl;store.commit('SET_AVATAR', this.options.img);this.$modal.msgSuccess("修改成功");this.visible = false;});});},// 实时预览realTime(data) {this.previews = data;},// 关闭窗口closeDialog() {this.options.img = store.getters.avatarthis.visible = false;window.removeEventListener("resize", this.resizeHandler)}}
};
</script>
<style scoped lang="scss">
.user-info-head {position: relative;display: inline-block;height: 120px;
}.user-info-head:hover:after {content: '+';position: absolute;left: 0;right: 0;top: 0;bottom: 0;color: #eee;background: rgba(0, 0, 0, 0.5);font-size: 24px;font-style: normal;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;cursor: pointer;line-height: 110px;border-radius: 50%;
}
</style>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/181117.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

什么是高层设计 - 学习系统设计

高层设计或HLD指的是整体系统设计&#xff0c;包括系统架构和设计的描述&#xff0c;是一种通用的系统设计&#xff0c;包括&#xff1a; •系统架构•数据库设计•对系统、服务、平台和模块之间关系的简要描述。 高层设计或HLD也被称为宏观级别设计。 什么是高层设计文档&…

解锁 ElasticJob 云原生实践的难题

发生了什么 最近在逛 ElasticJob 官方社区时发现很多小伙伴都在头疼这个 ElasticJob 上云的问题&#xff0c;ElasticJob 本就号称分布式弹性任务调度框架&#xff0c;怎么在云原生环境就有了问题了呢&#xff0c;这就要从 Kubenertes 和 ElasticJob 的一些状态化说起。 有意思的…

1076 Forwards on Weibo (链接表层序遍历)

题意&#xff1a;给出关注列表&#xff0c;博主的粉丝会给博主点赞&#xff0c;粉丝的粉丝也会给博主点赞&#xff0c;一直递推到最多L层&#xff0c;求&#xff0c;最后会有多少人给博主点赞。 思路&#xff1a;将关注的粉丝用链接表存储&#xff0c;再对博主进行层序遍历&am…

2023年生肖在不同时间段的运势预测

随着信息技术的飞速发展&#xff0c;API已经成为了数据获取和交互的重要途径。很多网站和APP都在运用API来获取数据。今天我们来介绍一个十分有趣的API——《十二生肖运势预测API》&#xff0c;通过这个API&#xff0c;我们可以获取到每个生肖在不同时间段的运势预测&#xff0…

linux(2)之buildroot使用手册

Linux(2)之buildroot配置toolchain Author&#xff1a;Onceday Date&#xff1a;2023年11月27日 漫漫长路&#xff0c;才刚刚开始… 参考文档&#xff1a; Buildroot - Making Embedded Linux Easy 文章目录 Linux(2)之buildroot配置toolchain1. 构建配置1.1 配置config生成…

Java NIO SelectionKey

在 Java NIO&#xff08;New I/O&#xff09;中&#xff0c;SelectionKey 是与选择器 Selector 绑定的对象&#xff0c;用于表示通道 Channel 注册到选择器上的状态和事件。SelectionKey 提供了管理和操作通道的能力&#xff0c;可以监视通道的可读、可写、连接和接受事件&…

【LeetCode:1670. 设计前中后队列 | 数据结构设计】

&#x1f680; 算法题 &#x1f680; &#x1f332; 算法刷题专栏 | 面试必备算法 | 面试高频算法 &#x1f340; &#x1f332; 越难的东西,越要努力坚持&#xff0c;因为它具有很高的价值&#xff0c;算法就是这样✨ &#x1f332; 作者简介&#xff1a;硕风和炜&#xff0c;…

Python怎么在py文件中执行某个命令行,这个命令行是运行另外一个程序的命令,例如“python aa.py”

1、使用os.system os.system方法可以用来运行命令行命令。它比subprocess简单&#xff0c;但功能也更有限&#xff0c;不如subprocess那样灵活。 import oscommand "python properties_computer/on.py --input_datasets 12.csv" os.system(command) 2、通过“subp…

微信小程序仿网易严选(附精选源码32套,涵盖商城团购等)

商城主要实现的功能 首页、专题、分类、购物车、我的小程序授权登陆获取用户信息首页包含品牌制造页、品牌制造详情页面、新品首发页面、人气推荐页面、各分类列表商品详情页面&#xff0c;包含常见问题、大家都在看商品列表、加入购物车、收藏商品、立即购买、下订单、选择收…

WebDriverWait 等待

包的引用 from selenium import webdriver from selenium.webdriver.common.by import By from selenium.webdriver.support.ui import WebDriverWait from selenium.webdriver.support import expected_conditions as EC 使用方法 WebDriverWait(driver, 5, 0.5).until(EC.vi…

C语言进阶指南(11)(指针数组与二维数组)

*欢迎来到博主的专栏——C语言进阶指南 博主id&#xff1a;reverie_ly 文章目录 N级指针指针数组指针数组与二维数组数组指针作为函数的参数 N级指针 指针变量是一个存放地址的变量&#xff0c;在C语言中&#xff0c;每个变量都会有一个地址值。所以指针变量也有一个地址。 …

高防服务器和高防CDN的区别是什么?

现今大环境下攻击问题愈发严峻&#xff0c;许多网站有遇到被攻击导致网站崩溃&#xff0c;资源消耗的问题&#xff0c;那么这时候高防就是给为站长&#xff0c;企业等的第一选择了&#xff0c;那边目前高防CDN和高防服务器这两种抵御DDoS攻击的两种主流防御&#xff0c;那种会更…

Mysql 高级日志binlog、undoLog、redoLog 详解

数据更新流程与日志记录&#xff1a; undoLog&#xff1a; binLog&#xff1a; redoLog&#xff1a;

influxdb2.x安装配置指南

influxdb的教程已经是很清楚了&#xff0c;但没有中文版翻译&#xff0c;以下是个人安装配置总结 如果机器上只需要一个influxdb实例&#xff0c;或docker安装&#xff0c;直接yum install 就可以了&#xff0c;或者采用离线安装&#xff1a; sudo yum localinstall influxdb…

本地MinIO存储服务通过Java程序结合Cpolar内网穿透进行远程访问

[本地MinIO存储服务通过Java程序结合Cpolar内网穿透进行远程访问] 前言 MinIO是一款高性能、分布式的对象存储系统&#xff0c;它可以100%的运行在标准硬件上&#xff0c;即X86等低成本机器也能够很好的运行MinIO。它的优点包括高性能、高可用性、易于部署和管理、支持多租户…

golang log模块使用

在Go中&#xff0c;log 包是用于输出日志信息的标准库。以下是一些基本的 log 包的使用示例&#xff1a; 基本用法&#xff1a; package mainimport ("log" )func main() {log.Println("This is a log message.") } 运行程序&#xff0c;你会在控制台看到日…

【古月居《ros入门21讲》学习笔记】16_tf坐标系广播与监听的编程实现

目录 说明&#xff1a; 1. 实现过程&#xff08;C&#xff09; 创建功能包&#xff08;C&#xff09; 创建tf广播器代码&#xff08;C&#xff09; 创建tf监听器代码&#xff08;C&#xff09; 配置tf监听器与广播器代码编译规则 编译并运行 编译 运行 2. 实现过程&a…

基于STC12C5A60S2系列1T 8051单片机的IIC总线器件24C02记录单片机上电次数应用

基于STC12C5A60S2系列1T 8051单片机的IIC总线器件24C02记录单片机上电次数应用 STC12C5A60S2系列1T 8051单片机管脚图STC12C5A60S2系列1T 8051单片机I/O口各种不同工作模式及配置STC12C5A60S2系列1T 8051单片机I/O口各种不同工作模式介绍液晶显示器LCD1602简单介绍IIC通信简单介…

微信小程序生成二维码并保存到本地方法

微信小程序生成二维码请保存到本地方法 官方weapp-qrcode插件 github链接 功能完成样子 wxml <view class"qrcode"><canvas style"width: 275px; height: 275px;" canvas-idmyQrcode></canvas> </view> <view class" …

使用Python类型提示保持代码整洁,提高可读性

大家好&#xff0c;虽然Python具有高可读性和简洁性的特点&#xff0c;但随着项目变得越来越大、越来越复杂&#xff0c;代码的维护可能变得困难。Python最近引入的类型提示功能可以解决这些问题。 类型提示是一种为Python添加可选静态类型的方式&#xff0c;类型提示首先在PE…