Parcourir la source

im客服增加图片粘贴功能

fangq il y a 3 ans
Parent
commit
153a347408
1 fichiers modifiés avec 29 ajouts et 1 suppressions
  1. 29 1
      src/views/common/imBox.vue

+ 29 - 1
src/views/common/imBox.vue

@@ -192,7 +192,7 @@
                     class="search-btnn"
                     id="iii"
                   />
-                  <div class="reply-area">
+                  <div class="reply-area" @paste="pasteImg($event)">
                     <textarea
                       name=""
                       id=""
@@ -945,6 +945,34 @@ export default {
         return false
       }
     },
+    /**
+     * textarea图片粘贴事件
+     */
+    pasteImg(e) {
+      console.log(e)
+      const { items } = e.clipboardData; // 获取粘贴板文件对象
+      if (items.length) {
+        for (const item of items) {
+          if (item.type.indexOf('image') !== -1) {
+            const file = item.getAsFile(); // 获取图片文件
+            if (file) {
+              uploadFile(
+                this.$http.adornUrl('/admin/file/upload/imFile'),
+                file
+              ).then(({ data }) => {
+                let messageInfo = {
+                  toId: this.currentUserId,
+                  content: data,
+                  msgType: 1
+                }
+                this.$refs['file'].value = null // 解决上传同一图片不显示bug
+                this.addMessage(messageInfo)
+              })
+            }
+          }
+        }
+      }
+    },
 
     /**
      * 发送文本消息