vue输入框粘贴图片并上传
首先需要确认的是 input输入框是无法 粘贴/显示 图片类型的，那怎么实现呢？
既然input用不了，那就模仿一个input，这里用到的是HTML5新增的一个属性contenteditable；
contenteditable 属性值为Boolean类型，规定元素内容是否可编辑。如果元素未设置 contenteditable 属性，那么元素会从其父元素继承该属性。 即，如果父元素可编辑，该子元素也可编辑。
<div contenteditable="true"
class="textareaSty">
</div>
<style>
.textareaSty {
width: 160px;
height: 210px;
resize: none;
border: 1px solid #d2d2d2;
border-radius: 4px;
}
</style>
是的，只需要加上这么一个属性，就可以创建一个可编辑的区域。（可以粘贴网络复制和屏幕截图的图片， 本地复制的还不行~ 这个问题后面再优化，至少现在实现了图片的粘贴/显示）
核心代码
现在只是在页面上显示出了图片，但是图片数据没有拿到还无法上传，这里可以使用paste方法：
<div contenteditable="true" class="textareaSty" id="pasteContent"
@paste="pasteImg($event)">
<!-- vue 可以直接使用@paste 默认参数就是event 如需传其它参数写出$event -->
<!-- 也可以使用js的addEventListener监听paste -->
</div>
// 粘贴图片并自动提交至接口
const pasteImg = async (e: any) => {
const {
items } = e.clipboardData; // 获取粘贴板文件对象
if (items.length) {
for (const item of items) {
if (item.type.indexOf('image') !== -1) {
const file = item.getAsFile(); // 获取图片文件
if (file) {
const formData = new FormData();
formData.append('file', file);
// 接口返回的是图片线上地址
const res: any = await uploadImg(formData);
if (res.code === 0) {
// 本地图片复制粘贴无法显示的 可以在拿到图片地址后用变量暂存起来
// 替换掉dom 将变量绑定到新dom下img标签的src上
imgUrl = res.data;
ElMessage({
type: 'success',
message: res.msg,
});
} else {
ElMessage({
type: 'error',
message: res.msg,
});
}
}
}
}
}
};
到这里就实现了粘贴上传图片的功能；
优化
还可以再优化一下，加上自动获取焦点 和 删除按钮
// 点击自动聚焦
clickPaste() {
const pasteContent = document.getElementById('pasteContent');
pasteContent?.focus(); // 点击粘贴时 聚焦dom
},
// 在dom添加 x icon 点击删除已导入图片
const removeImg = () => {
const div = document.getElementById('pasteContent');
if (div.childNodes.length) {
const img: any = div.childNodes;
div.removeChild(img[0]);
// 判断 已导入图片的话 清空
if (imgUrl) {
imgUrl = '';
}
}
};