效果截图:
1、文本框cv粘贴图片事件
2、点击按钮获取粘贴板内容,目前有个问题,只可以获取到截图工具的截图,系统图片鼠标右键复制、ctrlC,粘贴板获取不到图片数据
伪代码:
<template>
<div style="padding: 20px">
<div style="margin: 20px">
<el-button @click="showUploadDialog = true">ctrl+v粘贴图片</el-button>
</div>
<div style="margin: 20px">
<el-button @click="handlePasteClick">点击按钮触发粘贴</el-button>
<el-image
v-if="imgSrc"
style="margin-left: 20px"
:src="imgSrc"
alt="粘贴的图片"
></el-image>
</div>
<el-dialog title="上传图片" width="520px" :visible.sync="showUploadDialog">
<div class="upload-box">
<ul v-show="uploadPicList.length" class="ul-box">
<li
v-for="(item, index) in uploadPicList"
:key="item.pictureId"
class="img-box"
>
<el-image
fit="cover"
style="width: 100%; height: 100%"
:src="item.pictureSrc"
>
</el-image>
<div class="search" @click.stop="showUploadViewer(index)">
<i class="iconfont iconsousuo"></i>
</div>
<div class="delete">
<i
class="iconfont icondanchuangguanbi"
@click.stop="deletePic(item)"
></i>
</div>
<div class="filter"></div>
</li>
</ul>
<div class="upload-textarea" @paste="handlePaste">
<el-input
style="width: 100%"
:autosize="{ minRows: 5, maxRows: 5 }"
type="textarea"
resize="none"
>
</el-input>
<p class="text-tips">将图片按Ctrl + V 粘贴</p>
</div>
<p class="tips">
请上传相关文件,可上传多个,仅支持 png 或者 jpg 格式。
</p>
</div>
<div slot="footer">
<el-button @click="onCancel">取消</el-button>
<el-button @click="onConfirm" type="primary" :disabled="uploadDisabled"
>确定
</el-button>
</div>
</el-dialog>
</div>
</template>
<script>
export default {
data() {
return {
//图片上传相关
showUploadDialog: false,
showUploadBtn: false,
uploadPicList: [],
currentRow: null,
uploadDisabled: false,
showViewer: false,
initialIndex: 0,
urlList: [],
imgSrc: "",
};
},
methods: {
//点击按钮触发粘贴
async handlePasteClick(operationType) {
try {
const clipboardItems = await navigator.clipboard.read();
for (const clipboardItem of clipboardItems) {
for (const type of clipboardItem.types) {
if (type.startsWith("image/")) {
const blob = await clipboardItem.getType(type);
const imageURL = URL.createObjectURL(blob);
// 将图片数据赋值给 <img> 元素的 src 属性
this.imgSrc = imageURL;
//后面这里拿到file对象调后台接口上传图片
// const file = new File([blob], "image.png", { type: blob.type });
// this.uploadFile({ file: file }, operationType);
}
}
}
} catch (error) {
console.error(error);
this.$message.error("粘贴图片失败");
}
},
//文本框的粘贴事件
handlePaste(event) {
if (event.clipboardData.getData("text/plain")) {
return;
}
const items = (event.clipboardData || window.clipboardData).items;
event.preventDefault();
event.returnValue = false;
let file = null;
if (!items || items.length === 0) {
this.$message.warning("当前不支持本地图片上传");
return;
}
//搜索剪切板items
for (let i = 0; i < items.length; i++) {
if (items[i].type.includes("image")) {
file = items[i].getAsFile();
break;
}
}
if (!file) {
this.$message.warning("仅支持单张图片");
return;
}
// this.uploadFile({ file: file });
},
/*自定义上传方法*/
uploadFile(file) {
let uploadPicList = this.uploadPicList;
if (uploadPicList.length >= 5) {
this.$message.error("上传图片数量超过5张,请处理后重新上传");
return false;
}
let params = {
baseFileUrl: this.baseFileUrl,
type: "project",
directoryName:
new Date().getFullYear() +
"/" +
(new Date().getMonth() + 1) +
"/" +
new Date().getDate(),
token: this.getToken(),
};
file.name = file.file.name;
file.relativePath = file.file.webkitRelativePath;
uploadFileApi(params, file).then((res) => {
if (res.status === 200) {
const data = res.data;
let obj = {
pictureSrc: data.downloadUrl,
pictureId: data.id,
};
this.uploadPicList.push(obj);
} else {
this.$message({
type: "error",
message: "文件上传失败",
});
}
});
},
//上传图片弹窗的预览
showUploadViewer(index) {
this.initialIndex = index;
this.urlList = this.previewSrcList;
this.$nextTick(() => {
this.showViewer = true;
});
},
deletePic(item) {
const list = this.uploadPicList;
const index = list.findIndex((el) => el.pictureId === item.pictureId);
if (index !== -1) {
this.uploadPicList.splice(index, 1);
}
},
onCancel() {
this.uploadPicList = [];
this.showUploadDialog = false;
},
// 上传图片确定
onConfirm() {
const params = {
id: this.currentRow.id,
pictureIds: this.uploadPicList.map((el) => el.pictureId).join(","),
};
this.uploadDisabled = true;
this.$API.dicDisposeTaskV2
.updatePictureV2(params)
.then((res) => {
if (res.status === 200) {
this.$message.success(res.message);
this.getFormInfoDetailHandle();
this.showUploadDialog = false;
}
})
.finally(() => {
this.uploadDisabled = false;
});
},
},
};
</script>
<style lang="scss" scoped>
.upload-box {
.img-box {
position: relative;
border-radius: 2px;
width: 57px;
height: 30px;
&:hover {
.icon-box,
.filter {
display: block;
}
}
}
.filter {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(26, 36, 45, 0.4);
backdrop-filter: blur(1px);
display: none;
}
.icon-box {
position: absolute;
left: 50%;
top: 50%;
transform: translate3d(-50%, -50%, 0);
cursor: pointer;
padding: 0 6px;
z-index: 10;
display: none;
.iconfont {
color: #fff;
}
}
.el-button {
flex: 0 0 40px;
text-align: right;
}
}
.el-dialog__wrapper .upload-textarea {
margin-top: 20px;
width: 100%;
border-radius: 4px;
position: relative;
}
.el-dialog__wrapper .upload-textarea .text-tips {
position: absolute;
left: 50%;
top: 50%;
transform: translate3d(-50%, -50%, 0);
font-size: 12px;
line-height: 17px;
color: #777e8c;
font-weight: 500;
}
.el-dialog__wrapper .tips {
margin-top: 10px;
font-size: 12px;
line-height: 17px;
color: #777e8c;
font-weight: 400;
}
.el-dialog__wrapper .ul-box{
display: flex;
align-items: center
}
.el-dialog__wrapper .ul-box .img-box {
width: 57px;
height: 30px;
margin-right: 10px;
border-radius: 2px;
position: relative
}
</style>