Vue入力ボックスに画像を貼り付けてアップロード

最初に確認することは、入力ボックスで画像の種類を貼り付け/表示できないことですが、それを実現するにはどうすればよいですか?

input は使用できないため、入力を模倣します。これは HTML5 の新しい属性contenteditableです。

contenteditable 属性値はブール型で、要素の内容を編集できるかどうかを指定します。要素に contenteditable 属性が設定されていない場合、要素は親要素から属性を継承します。つまり、親要素が編集可能であれば、子要素も編集可能です。

<div contenteditable="true" 
     class="textareaSty">
</div>
<style>
    .textareaSty {
      
      
        width: 160px;
        height: 210px;
        resize: none;
        border: 1px solid #d2d2d2;
        border-radius: 4px;
      }
</style>

はい、このようなプロパティを追加するだけで編集可能な領域を作成できます。(ネットワークからコピーした写真やスクリーンショットは貼り付けることができますが、ローカルにコピーするだけでは十分ではありません~この問題は後で最適化されます。少なくとも写真の貼り付け/表示は実現されています)

コアコード

これで画像はページ上に表示されるだけですが、画像データを取得しないとアップロードできませんので、ここでは貼り付けメソッドを使用します。

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