vue项目中使用cropperjs实现上传头像并裁切头像大小

效果演示

github的cropperjs文档仓库地址：https://github.com/fengyuanchen/cropperjs

安装cropperjs

npm install cropperjs

使用cropperjs

html

1. 使用label的for属性和input进行绑定，实现点击label中的内容，相当于点击了input，达到上次图片功能
2. input的属性hidden相当于display:none
3. @change="onFileChange"是input本身支持的图片改变事件

<template><div class="setting-container"><div class="avatar"><!-- 使用for和input表单元素进行绑定 --><label for="file"><el-avatar shape="square":size="100"fit="cover":src="previewImage"></el-avatar><p>点击修改头像</p></label><!-- 上传图片 hidden相当于display:none --><!-- @change="onFileChange"是input本身支持的图片改变事件 --><input type="file"id="file"@change="onFileChange"ref="fileRef"hidden /></div><!-- 预览上传头像对话框 --><el-dialog title="修改头像"append-to-body@opened="onDialogOpend":visible.sync="dialogVisible"><div class="preview-image-warp"><img class="preview-image":src="previewImage"alt=""ref="previewImage"srcset=""></div><span slot="footer"class="dialog-footer"><el-button @click="dialogVisible = false">取 消</el-button><el-button type="primary"@click="onUpdataPhoto">确 定</el-button></span></el-dialog></div>
</template>

style

1. 修改cropperjs需要的样式

<style lang='less' scoped>
// 参考图片剪切文档，配置样式
.preview-image-warp {.preview-image {display: block;max-width: 100%;height: 300px;}
}
</style>

js

1. objectURL=windows.URL.createObjectURL(blod);blod 参数是File对象或者是Blod对象
2. file.files[0] 获得上传图片的file对象，通过window.URL.createObjectURL()方法创建对象URL
3. this.cropper.replace(this.previewImage)，第一次初始化完成后，如果预览图片发生了变化，裁切器默认不会更新，可以使用裁切器的replace方法，更新数据

<script>
import 'cropperjs/dist/cropper.css'
import Cropper from 'cropperjs'export default {name: 'settingIndex',props: {},components: {},data () {return {dialogVisible: false,previewImage: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg', // 上传图片cropper: null // 裁切器实例}},computed: {},watch: {},methods: {// 上传图片改变onFileChange () {// 在对话框中显示上传的图片const file = this.$refs.fileRef// objectURL=windows.URL.createObjectURL(blod);blod 参数是File对象或者是Blod对象，// file.files[0] 获得上传图片的file对象// 通过window.URL.createObjectURL()方法创建对象URLconst blobData = window.URL.createObjectURL(file.files[0])this.previewImage = blobData// 上传完头像，显示预览头像对话框this.dialogVisible = true// 解决选择相同文件不触发change事件问题file.value = ''},// 对话框打开动画结束的回调// 因为要在对话框中初始化剪切器，所以需要在对话框完全打开后再初始化剪切器onDialogOpend () {// 第一次初始化完成后，如果预览图片发生了变化，裁切器默认不会更新// 可以使用裁切器的replace方法，更新数据if (this.cropper) {this.cropper.replace(this.previewImage)return}// 初始化裁切器const image = this.$refs.previewImagethis.cropper = new Cropper(image, {aspectRatio: 1, // 初始化剪切选择框大小viewMode: 1 // 不能把剪切框移出图片本身})},// 点击对话框确定按钮，更新修改后的图片onUpdataPhoto () {this.cropper.getCroppedCanvas().toBlob((file) => {// 发送请求更新图片// const formData = new FormData()// formData.append('croppedImage', file)// 调用后端接口，发送请求，更改头像图片// updateUserPhoto(formData).then(res => {// console.log(res)})const imgURL = window.URL.createObjectURL(file)console.log(imgURL)this.previewImage = imgURL})this.dialogVisible = false}},created () { },mounted () { },beforeDestroy () { }
}
</script>

vue项目中使用cropperjs实现上传头像并裁切头像大小相关推荐

vue项目中的h5图片上传（处理上传的时候图片被旋转的问题，并压缩图片大小）
vue的图片上传这个页面实现的主要是实现创建球队功能,里面包含队徽,球队类型,球队名称,所属地址这里除了图片上传还有一个地址的三级联动功能,这里我把这个页面都贴上来了.这个项目中使用vux作为ui ...
vue项目中阻止浏览器返回上一页
vue项目中在某个页面阻止浏览器返回上一页,适用移动端.PC端. 使用场景例如: 首页与 A页面来回跳转,那样点击浏览器返回时也会来回跳转,本想当页面在首页的时候就不再返回了,所以这个时候 ...
Java Web项目中遇到的文件上传与下载问题
(转发自:https://www.cnblogs.com/xdp-gacl/p/4200090.html) 在Web应用系统开发中,文件上传和下载功能是非常常用的功能,今天来讲一下JavaWeb中 ...
ssm框架的项目中用户图片的上传功能
后台管理的web项目中,需要完成图片的上传功能工具准备:一.图片上传的必要JS文件:二:当前页面中JS重写提交图片的方法:三.后台接收和处理图片的方法整体思路:一.HTML中添加文件上传按钮: 二 ...
分享一些在 VUE 项目中你可能会用上的性能优化技巧
提起性能优化很多人眼前浮现的面试经验是不是历历在目呢?反正,性能优化在我看来他永远是前端领域的热度之王. 最近维护的项目恰巧在这个方向下了很大功夫,一些经验之谈奉上,希望对大家有些许帮助! 性能优化 ...
vue项目路径修改及打包上传到服务器
1.项目路径修改默认项目路径是localhost:8080,如果要配置位相对路径,需要在config/index.js文件的 assetsPublicPath配置为 ./ 2.项目打包用命令行工具 ...
JAVA项目中如何实现图片上传？
JAVA项目中实现图片上传 **前端div** <div class="layui-form-item"><label class="layui-for ...
vue 项目支持 ie9 实现文件上传
最近在做的一个项目,需要兼容到ie9,其他功能都好实现,唯有文件上传这块,花费了挺长时间的,遇到了很多坑,现在整理一下大家应该知道,element-ui和iview中的文件上传,是不支持ie9的这 ...
VUE项目 Iview UI 文件夹上传
html  <el-table-column label="操作" width="200">&l ...