vue 上传裁剪头像笔记

裁剪插件
1、安装

npm install cropperjs

2、使用

 <label for="file"><el-avatarshape="square":size="150"fit="cover":src="user.photo"></el-avatar><p>点击修改头像</p></label><inputid="file"type="file"ref="file"hidden@change="onFileChange"><el-dialogtitle="修改头像":visible.sync="dialogVisible"append-to-body@opened="onDialogOpened"@closed="onDialogClosed"><div class="preview-image-wrap"><imgclass="preview-image":src="previewImage"ref="preview-image"></div><span slot="footer" class="dialog-footer"><el-button @click="dialogVisible = false">取 消</el-button><el-buttontype="primary":loading="updatePhotoLoading"@click="onUpdatePhoto">确 定</el-button></span></el-dialog>

<script>
import {getUserProfile,updateUserPhoto,updateUserProfile
} from '@/api/user'
import 'cropperjs/dist/cropper.css'
import Cropper from 'cropperjs'
import globalBus from '@/utils/global-bus'export default {name: 'SettingsIndex',components: {},props: {},data () {return {user: {email: '',id: null,intro: '',mobile: '',name: '',photo: ''}, // 用户资料dialogVisible: false, // 控制上传图片裁切预览的显示状态previewImage: '', // 预览图片cropper: null, // 裁切器示例updatePhotoLoading: false, // 更新用户头像 loading 状态updateProfileLoading: false // 更新基本信息的 loading 状态}},computed: {},watch: {},created () {this.loadUser()},mounted () {},methods: {onUpdateUser () {// 表单验证// 验证通过，提交表单// 开启 loading 状态this.updateProfileLoading = trueconst { name, intro, email } = this.userupdateUserProfile({name,intro,email}).then(res => {this.$message({type: 'success',message: '保存成功'})// 关闭 loading 状态this.updateProfileLoading = false// 更新头部当前登录用户的信息// 发布通知，用户信息已修改globalBus.$emit('update-user', this.user)})},loadUser () {getUserProfile().then(res => {this.user = res.data.data})},onFileChange () {// 处于图片预览const file = this.$refs.fileconst blobData = window.URL.createObjectURL(file.files[0])this.previewImage = blobData// 展示弹出层，预览用户选择的图片this.dialogVisible = true// 解决选择相同文件不触发 change 事件问题this.$refs.file.value = ''},onDialogOpened () {// 图片裁切器必须基于 img 进行初始化// 注意：img 必须是可见状态才能正常完成初始化//       因为我们这里要在对话框里面初始化裁切器//       所以务必要在对话框完全打开的状态去进行初始化。// 获取图片 DOM 节点const image = this.$refs['preview-image']// 第1次初始化好以后，如果预览裁切的图片发生了变化，裁切器默认不会更新// 如果需要预览图片发生变化更新裁切器：//    方式一：裁切器.replace 方法//    方式二：销毁裁切器，重新初始化// 初始化裁切器if (this.cropper) {this.cropper.replace(this.previewImage)return}this.cropper = new Cropper(image, {viewMode: 1,dragMode: 'move',aspectRatio: 1// cropBoxResizable: false// dragMode: 'none',// movable: true,// 当你移动裁切器的时候会触发调用 crop 方法// crop (event) {//   console.log(event.detail.x)//   console.log(event.detail.y)//   console.log(event.detail.width)//   console.log(event.detail.height)//   console.log(event.detail.rotate)//   console.log(event.detail.scaleX)//   console.log(event.detail.scaleY)// }})},onDialogClosed () {// 对话框关闭，销毁裁切器// this.cropper.destroy()},onUpdatePhoto () {// 让确定按钮开始 loadingthis.updatePhotoLoading = true// 获取裁切的图片对象this.cropper.getCroppedCanvas().toBlob(file => {const fd = new FormData()// photo为后台接口要求keyfd.append('photo', file)// 请求更新用户头像请求提交 fdupdateUserPhoto(fd).then(res => {console.log(res)// 关闭对话框this.dialogVisible = false// 更新视图展示// 直接把裁切结果的文件对象转为 blob 数据本地预览this.user.photo = window.URL.createObjectURL(file)// 关闭确定按钮的 loadingthis.updatePhotoLoading = falsethis.$message({type: 'success',message: '更新头像成功'})// 更新顶部登录用户的信息globalBus.$emit('update-user', this.user)// 把服务端返回的图片进行展示有点慢// this.user.photo = res.data.data.photo})})}}
}
</script>

<style scoped lang="less">
.preview-image-wrap {/* Ensure the size of the image fit the container perfectly */.preview-image {display: block;/* This rule is very important, please don't ignore this */max-width: 100%;height: 200px;}
}
</style>

vue 上传裁剪头像笔记相关推荐

jcrop php 头像裁剪,上传裁剪头像（Jcrop）
上传裁剪头像(Jcrop) -- by Stephen 2016/1/24 20:17:21 总体思路:用户点击选择头像按钮,选好图片后jcrop所在的div以遮罩层的形式显示,此时异步更新图片的sr ...
vue 移动端头像裁剪_vue头像上传裁剪组件_一个漂亮的Vue组件，用于图像裁剪和上传...
vue头像上传裁剪组件 vue-image-crop-upload (vue-image-crop-upload) A beautiful vue component for image crop a ...
小程序图片裁剪插件image-cropper实现个人头像上传裁剪功能
小程序图片裁剪插件image-cropper实现个人头像上传裁剪功能参考文档:小程序图片裁剪插件 image-cropper 整体效果流程图一.第一步引入image-cropper,放在dist文 ...
vue上传（兼容IE9）
项目中vue文件上传功能原来使用的是element ui组件,头像上传裁剪使用的是vue-image-crop-upload,但是这两个组件只支持到IE10+,现在项目要求兼容IE9,这两个组件就没办 ...
升级IOS8游戏上传自定义头像功能失效的问题
为了支持arm64,之前已经折腾了很久,昨晚打包准备提交苹果审核时,测试那边的同事反馈说游戏上传自定义头像功能不可用了. 游戏上传自定义功能的简介:卡牌游戏最初是<比武招亲>中有一个充VI ...
2020年 IOS 逆向反编译注入修改游戏或APP的调用参数新手系列教程——使用theos tweak 注入hook修改游戏执行代码上传动态头像
2020年 IOS 逆向反编译注入修改游戏或APP的调用参数新手系列教程--使用theos tweak 注入hook修改游戏执行代码上传动态头像开篇需求&最终效果环境要求与即将使用的 ...
Springboot + elementUI实现上传用户头像
最近一直在做一个背单词的小项目练手,准备着加入个新功能,想了很多种办法,本来准备利用sm.ms图床,把用户头像上传到图床然后返回链接把链接存到数据库里,后来想了想,感觉用户的头像存在那不太好,于是还是 ...
Android图片上传（头像裁切+原图原样）
还是那句话,最近项目比较忙拖了很久这篇文章终于完成了! 先看一下效果图: (一)头像裁切.上传服务器(效果图) 一般都是有圆形显示头像的,这里我自定义了一个ImageView,页面很干净但是看着很上档 ...
vue上传大文件/视频前后端（java）代码
vue上传大文件/视频前后端(java)代码一.上传组件二.后端java代码注意: 一.上传组件 <template><div>&l ...

vue 上传裁剪头像笔记

vue 上传裁剪头像笔记相关推荐

最新文章

热门文章