Browse Source

fix:富文本粘贴图片转换url

Tang 3 years ago
parent
commit
20ffb3b828
1 changed files with 31 additions and 3 deletions
  1. 31 3
      src/components/Editor/index.vue

+ 31 - 3
src/components/Editor/index.vue

@@ -159,8 +159,21 @@ export default {
           });
         } else {
           if (op.insert.image.includes("data:image")) {
-            //本地图片会使文件file开头
-            this.$message.warning("不允许粘贴图片,请手动上传");
+            /**
+             * 粘贴图片
+             */
+            let arr = op.insert.image.split(",");
+            let mime = arr[0].match(/:(.*?);/)[1];
+            let bytes = atob(arr[1]);
+            let n = bytes.length;
+            let ia = new Uint8Array(n);
+            while (n--) {
+              ia[n] = bytes.charCodeAt(n);
+            }
+            let arry = new File([ia], "随机名称", { type: mime });
+            this.imageChange({
+              file: arry,
+            });
           } else {
             ops.push({
               insert: op.insert,
@@ -171,10 +184,25 @@ export default {
       Delta.ops = ops;
       return Delta;
     },
+    base64ToFile(base64, fileName) {
+      return new Promise((resolve, reject) => {
+        let arr = base64.split(",");
+        let mime = arr[0].match(/:(.*?);/)[1];
+        let bytes = atob(arr[1]);
+        let n = bytes.length;
+        let ia = new Uint8Array(n);
+        while (n--) {
+          ia[n] = bytes.charCodeAt(n);
+        }
+        let arry = new File([ia], fileName, { type: mime });
+        this.$upload.upload(arry, 2).then((res) => {
+          resolve(this.$methodsTools.splitImgHost(res));
+        });
+      });
+    },
     init() {
       const editor = this.$refs.editor;
       this.Quill = new Quill(editor, this.options);
-      console.log(this.Quill);
       // 如果设置了上传地址则自定义图片上传事件
       if (this.uploadUrl) {
         let toolbar = this.Quill.getModule("toolbar");