富文本复制粘贴图片上传至url

RuoYi

2025-04-24 1a0f37a2dc03bfdecb209c24b4694b486ac2a8c5

 ruoyi-ui/src/components/Editor/index.vue

@@ -18,6 +18,7 @@
</template>



<script>

import axios from "axios";

import Quill from "quill";

import "quill/dist/quill.core.css";

import "quill/dist/quill.snow.css";

@@ -135,6 +136,7 @@
            this.quill.format("image", false);

          }

        });

        this.Quill.root.addEventListener('paste', this.handlePasteCapture, true);

      }

      this.Quill.clipboard.dangerouslyPasteHTML(this.currentValue);

      this.Quill.on("text-change", (delta, oldDelta, source) => {

@@ -192,8 +194,29 @@
    handleUploadError() {

      this.$message.error("图片插入失败");

    },

  },

};

    // 复制粘贴图片处理

    handlePasteCapture(e) {

      const clipboard = e.clipboardData || window.clipboardData;

      if (clipboard && clipboard.items) {

        for (let i = 0; i < clipboard.items.length; i++) {

          const item = clipboard.items[i];

          if (item.type.indexOf('image') !== -1) {

            e.preventDefault();

            const file = item.getAsFile();

            this.insertImage(file);

          }

        }

      }

    },

    insertImage(file) {

      const formData = new FormData();

      formData.append("file", file);

      axios.post(this.uploadUrl, formData, { headers: { "Content-Type": "multipart/form-data", Authorization: this.headers.Authorization } }).then(res => {

        this.handleUploadSuccess(res.data);

      })

    }

  }

}

</script>



<style>