效果如下
看之前请先看上一篇《vue3中使用组件tui-image-editor进行图片处理 》中的
1、第一步安装
2、第二部封装组件
本篇只是在这基础上结合el-upload使用组件
3、第三步结合el-upload使用组件
javascript
<template>
<el-dialog
:title="dialogTitle"
:modelValue="dialogVisible"
width="55%"
top="4vh"
:before-close="closeDialog"
:close-on-click-modal="false"
destroy-on-close
>
<div class="newBox">
<el-upload
class="img-edit"
:show-file-list="false"
:accept="cropperObj.accpetType"
:limit="cropperObj.limit"
:on-change="cropperObj.handleAvatarSuccess"
:before-upload="cropperObj.beforeAvatarUpload"
:disabled="cropperObj.dealPicShow"
>
<div class="imgCorpper" v-if="cropperObj.dealPicShow" @mouseenter="cropperObj.buttonopen" @mouseleave="cropperObj.buttonexit">
<div class="imgCorpperY">
<el-image
:src="cropperObj.previewViewer"
:zoom-rate="1.2"
:preview-src-list="cropperObj.srcList"
:initial-index="4"
fit="cover"/>
<el-image-viewer
v-if="cropperObj.showImageViewer"
@close="cropperObj.closeImgView"
:url-list="cropperObj.srcList"
/>
<div :class="cropperObj.showBack?'imgcurrent show':'imgcurrent'" >
<div class="imgBack"></div>
<div class="imgicon">
<el-icon @click="cropperObj.showPic"><ZoomIn /></el-icon>
<el-icon @click="cropperObj.delePic"><Delete /></el-icon>
</div>
</div>
</div>
</div>
<el-icon v-else class="img-edit-icon"><Plus /></el-icon>
</el-upload>
<!-- 上传提示 -->
<div class="el-upload__tip" v-if="!cropperObj.dealPicShow">
请上传大小不超过 <b style="color: #f56c6c">{{ cropperObj.fileSize }}MB</b>格式为 <b style="color: #f56c6c">{{ cropperObj.fileType.join("/") }}</b>的文件
</div>
<!-- 图片处理框 -->
<SignImage
v-if="cropperObj.cVisible"
:dialogVisible.sync="cropperObj.cVisible"
:title="cropperObj.ctitle"
:imgUrl="cropperObj.previewsImgUrl"
@getNewImg="cropperObj.getNewImg"
@closeCropperDialog="cropperObj.closeCropperView"
></SignImage>
</div>
<template #footer>
<div class="dialog-footer">
<!-- <el-button class="btn-sure" type="primary" @click="closeDialog">确 定</el-button> -->
<el-button @click="closeDialog">取 消</el-button>
</div>
</template>
</el-dialog>
</template>
<script setup>
import SignImage from '@/components/SignImage/index.vue'
import { importNewImg, editNewImg } from "@/api/back/home.js";
import { ref, reactive, watch } from "vue";
const props = defineProps({
dialogVisible: {
type: Boolean,
default: false,
},
dialogTitle: {
type: String,
default: "",
},
});
// 关闭弹窗
const emits = defineEmits(["closeDialog"]);
const closeDialog = () => {
emits("closeDialog");
};
// new 背景图片
const cropperObj = reactive({
fileType: ["png", "jpg", "jpeg"],
accpetType:".png,.jpg,.jpeg",
limit:1,
fileSize:10,
cVisible:false, // 显示切图弹框
ctitle:"", // 弹框标题
imgShow:false, //是否有图片
previewsImgUrl:"", //图片地址
srcList:[], //图片预览地址数组
showBack:false, // 预览删除图层是否展示
showImageViewer:false, // 是否预览
previewViewer:"", // 处理后的图片地址
dealPicShow:false, // 是否删除了处理后的图片
// 开启编辑弹框
openCropperView: () => {
cropperObj.ctitle="图片"
cropperObj.cVisible = true
},
// 关闭编辑弹框所触发的事件
closeCropperView: (data)=> {
cropperObj.cVisible = false
},
// 预览删除图层显示
buttonopen: ()=>{
cropperObj.showBack = true
},
// 预览删除图层隐藏
buttonexit: ()=>{
cropperObj.showBack = false
},
// 预览开启
showPic: ()=>{
cropperObj.showImageViewer = true
},
// 预览隐藏
closeImgView: ()=>{
cropperObj.showImageViewer = false
},
// 删除图片
delePic:()=>{
cropperObj.previewsImgUrl ="";
cropperObj.previewViewer = ""
cropperObj.srcList=[]
setTimeout(function(){
cropperObj.dealPicShow = false
},1000)
cropperObj.imgShow = false
// formData.backgroundUrl = "";
},
// 获取处理完的图片
getNewImg:(val) =>{
cropperObj.previewViewer = window.serverUrl.IMG_SERVER + val
cropperObj.dealPicShow = true
cropperObj.srcList=[cropperObj.previewViewer]
// formData.backgroundUrl = val;
},
beforeAvatarUpload:(file)=> {
let isImg = false;
let fileExtension = "";
if (cropperObj.fileType.length) {
if (file.name.lastIndexOf(".") > -1) {
fileExtension = file.name.slice(file.name.lastIndexOf(".") + 1);
}
isImg = cropperObj.fileType.some((type) => {
if (file.raw.type.indexOf(type) > -1) return true;
if (fileExtension && fileExtension.indexOf(type) > -1) return true;
return false;
});
} else {
isImg = file.type.indexOf("image") > -1;
}
if (!isImg) {
ElMessage.error(`格式不正确, 请上传${cropperObj.fileType.join("/")}图片格式文件!`);
return false;
} else {
isImg = true;
}
if (cropperObj.fileSize) {
const isLt = file.size / 1024 / 1024 < cropperObj.fileSize;
if (!isLt) {
proxy.$modal.msgError(`上传大小不能超过 ${cropperObj.fileSize} MB!`);
// fileList.value = [];
return false;
}
}
},
handleAvatarSuccess:(file, fileList)=> {
const bgFormData = new FormData()
bgFormData.append("file", file.raw);
importNewImg(bgFormData).then(res => {
cropperObj.previewsImgUrl = window.serverUrl.IMG_SERVER + res.fileName
cropperObj.ctitle="图片处理"
cropperObj.cVisible = true
})
},
})
</script>
<style lang="scss" scoped>
.img-edit{
display: flex;
justify-content: center;
align-items: center;
font-size:1rem;
width:148px;
height: 148px;
border:1px dashed #cdd0d6;
position: relative;
border-radius: 6px;
.el-icon{
width:0.35rem;
height: 0.35rem;
color:#909399;
}
.imgCorpper{
display: flex;
justify-content: center;
align-items: center;
font-size:1rem;
width:148px;
height: 148px;
border:1px dashed #cdd0d6;
position: relative;
border-radius: 6px;
cursor:pointer;
.el-icon{
width:0.35rem;
height: 0.35rem;
color:#909399;
}
.imgCorpperY{
position: relative;
width: 100%;
height: 100%;
border-radius: 6px;
overflow: hidden;
height: 100%;;
>img{
width: 100%;
height: 100%;;
}
.el-image{
width: 100%;
height: 148px;
max-height: 100%;;
}
.imgcurrent{
display: none;
position: absolute;
width: 100%;
height: 100%;
top: 0;
.imgBack{
background: #00000082;
width: 100%;
height: 100%;
position: absolute;
z-index: 1;
}
.imgicon{
position: absolute;
width: 60%;
margin: 0 20%;
height: 100%;
display: flex;
justify-content: space-between;
align-items: center;
color: #fff;
z-index: 2;
.el-icon{
color: #fff;
// font-size: 1rem;
}
}
}
>.show{
display:block;
}
}
}
}
.img-edit:hover {
border-color: #409EFF;
}
</style>