vue输入框粘贴图片并上传

HuaHua·Li

已于 2022-09-30 16:46:08 修改

阅读量2.2k

点赞数 1

于 2022-09-30 16:44:03 首次发布

本文链接：https://blog.csdn.net/weixin_53058401/article/details/126729397

版权

关键词由CSDN通过智能技术生成

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 = '';
      }
    }
  };