vue+element实现图片上传及裁剪功能
作者:沫熙瑾年 发布时间:2024-05-29 22:22:12
标签:vue,element,上传,裁剪
本文实例为大家分享了vue+element实现图片上传及裁剪的具体代码,供大家参考,具体内容如下
随便写的一个小demo 功能是没有任何问题 可能里面会有一些小细节没有优化
1 、安装 vue-cropper
npm install vue-cropper
2、组件内使用
import { VueCropper } from 'vue-cropper'
components: {
VueCropper,
},
具体可见官网
demo
<template>
<div>
<h1>图片上传</h1>
<div>
<el-upload
class="avatar-uploader"
action="https://jsonplaceholder.typicode.com/posts/"
:show-file-list="false"
:on-success="handleAvatarSuccess"
:before-upload="beforeAvatarUpload"
>
<img v-if="imageUrl" :src="imageUrl" class="avatar">
<i v-else class="el-icon-plus avatar-uploader-icon"></i>
</el-upload>
</div>
<el-dialog title="图片剪裁" :visible.sync="dialogVisible" append-to-body>
<div class="cropper-content">
<div class="cropper" style="text-align:center">
<vueCropper
ref="cropper"
:img="option.img"
:outputSize="option.outputSize"
:outputType="option.outputType"
:info="option.info"
:canScale="option.canScale"
:autoCrop="option.autoCrop"
:autoCropWidth="option.autoCropWidth"
:autoCropHeight="option.autoCropHeight"
:fixed="option.fixed"
:fixedBox="option.fixedBox"
:fixedNumber="option.fixedNumber"
></vueCropper>
</div>
</div>
<div slot="footer" class="dialog-footer">
<el-button @click="dialogVisible = false">取 消</el-button>
<el-button type="primary" @click="finish" :loading="loading">确认</el-button>
</div>
</el-dialog>
</div>
</template>
<script>
import {VueCropper} from 'vue-cropper'
export default {
components: {
VueCropper
},
data(){
return{
imageUrl: '',
dialogVisible: false,
// 裁剪组件的基础配置option
option: {
img: '', // 裁剪图片的地址
info: true, // 裁剪框的大小信息
outputSize: 0.8, // 裁剪生成图片的质量
outputType: 'jpeg', // 裁剪生成图片的格式
canScale: false, // 图片是否允许滚轮缩放
autoCrop: true, // 是否默认生成截图框
autoCropWidth: 100, // 默认生成截图框宽度
autoCropHeight: 100, // 默认生成截图框高度
fixedBox: true, // 固定截图框大小 不允许改变
fixed: true, // 是否开启截图框宽高固定比例
fixedNumber: [1, 1], // 截图框的宽高比例
full: true, // 是否输出原图比例的截图
canMoveBox: false, // 截图框能否拖动
original: false, // 上传图片按照原始比例渲染
centerBox: false, // 截图框是否被限制在图片里面
infoTrue: true, // true 为展示真实输出图片宽高 false 展示看到的截图框宽高
canMove:true,
},
picsList: [], //页面显示的数组
// 防止重复提交
loading: false,
fileinfo:{}
}
},
methods: {
handleAvatarSuccess(res, file,fileList) {
//上传成功后将图片地址赋值给裁剪框显示图片
this.$nextTick(() => {
this.option.img = URL.createObjectURL(file.raw);
this.fileinfo = res
this.dialogVisible = true
})
},
beforeAvatarUpload(file) {
const isJPG = file.type === 'image/jpeg'||file.type==='image/png';
const isLt2M = file.size / 1024 / 1024 < 2;
if (!isJPG) {
this.$message.error('上传头像图片只能是 JPG 格式!');
}
if (!isLt2M) {
this.$message.error('上传头像图片大小不能超过 2MB!');
}
return isJPG && isLt2M;
},
finish() {
this.$refs.cropper.getCropBlob((data) => {
var fileName = 'goods' + this.fileinfo.uid
this.loading = true
//上传阿里云服务器
//请求
})
}
}
}
</script>
<style scoped>
.avatar-uploader{
background:red!important;
width:150px;height:150px;
text-align: center;
line-height: 150px;
}
.el-icon-plus{
width:150px;height:150px;font-size:30px;
}
.cropper-content{
width:500px;height:500px;background: pink;
}
.cropper{
width:500px;
height:500px;
background: yellow;
}
</style>
关于vue.js组件的教程,请大家点击专题vue.js组件学习教程进行学习。
来源:https://blog.csdn.net/xy19950125/article/details/105562295
0
投稿
猜你喜欢
- 发邮件是一种很常见的操作,本篇主要介绍一下如何用python实现自动发件。import smtplibfrom email.mime.tex
- 最近写了一个VUE的web app项目,需要实现某个部位吸顶的效果。即,页面往上滑动,刚好到达该部位时,该部分,固定在顶部显示。1、监听滚动
- remove()方法从列表中删除第一个obj。语法以下是remove()方法的语法:list.remove(obj)参数&nbs
- 下面就是我们的authenticate.asp页面,在这里,将用户的信息收集起来,连同最初的URL一起传到一个识别用户身份的页面中。我们可用
- 前言new = old[:]Python老鸟都知道以上代码是什么意思。它复制列表old到new。它对于新手来说是种困惑而且应该避免使用这种方
- 将无权点文件转化成邻接矩阵目前点文件是两列Excel代码,在进行复杂网络运算时需要转化成邻接矩阵。我在网上找了一个代码,稍微修改了下,亲测可
- 【实验目的】:了解SQL语言的使用,进一步理解关系运算,巩固数据库的基础知识。【实验要求】:掌握利用Select语句进行各种查询操作:单表查
- 1.tensor张量与numpy相互转换tensor ----->numpyimport torcha=torch.ones([2,5
- 平常我们只听说过ADO等一类ASP对象,但在ASP中还有个鲜为人知的专门SQL Server的ASP访问对象,它就是SQLOLE.SQLSe
- 1.初探刚开始接触go时,以为import自定义包与Java工程类似,在非GOPATH的路径中新建了一个go项目HelloGo,如下:接下来
- mysql复制表中的一列到另一个表中有时候,我们需要复制某个字段一整列的数据到另外一个新的字段中,这很简单,SQL可以这么写:UPDATE
- 前面我们简单的了解Django的一些工作原理,其中关于页面展示的内容,也全部都是视图(Views)返回的内容,那么我们也知道前端包括很多内容
- 最近开发过程中遇到一些小问题(似乎问题总是那么多),但一直没什么时间去优化与解决。程序员不能被业务绑架,有时间还是花点在代码,开始这次的vu
- 在使用SQL Server 的过程中,由于经常需要从多个不同地点将数据集中起来或向多个地点复制数据,所以数据的导出,导入是极为常见的操作.我
- 例子:http.Handle("/tmpfiles/", http.StripPrefix("/tmpfile
- 这两天闲来无事在百度上淘了点图片,不多,也就几万张吧,其中有不少美女图片奥!哈哈!这里暂且不说图片是怎么获得的,咱聊聊得到图片以后发生的事。
- asp使用session来防止表单多次被提交的方法。formtest.asp' 表单文件<%Randomize&nb
- 本文实例讲述了php获取客户端IP及URL的方法。分享给大家供大家参考,具体如下:function getonlineip(){//获取用户
- 1. os.system(shell_command)直接在终端输出执行结果,返回执行状态0,1此函数会启动子进程,在子进程中执行comma
- 因此计划先把数据转插入一个临时表,再对临时表的数据进行分析。 问题点是如何动态创建临时表。原先Insus.NET使用下面代码实现: DECL