From 91c0892850f89cdc50001e7542218b2779c29da2 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E7=A3=B7=E5=8F=B6?= <14103883+leaf-phos@user.noreply.gitee.com> Date: Sun, 27 Apr 2025 10:40:01 +0800 Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96=E7=BC=96=E8=BE=91=E5=99=A8?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/Editor/index.vue | 80 ++++++++++++++++++++++++----- src/views/bst/realName/index.vue | 25 +++++---- src/views/system/user/view/view.vue | 11 +++- 3 files changed, 91 insertions(+), 25 deletions(-) diff --git a/src/components/Editor/index.vue b/src/components/Editor/index.vue index 4e2b47a..d790ad8 100644 --- a/src/components/Editor/index.vue +++ b/src/components/Editor/index.vue @@ -24,13 +24,16 @@ import "quill/dist/quill.snow.css"; import "quill/dist/quill.bubble.css"; import { getToken } from "@/utils/auth"; import axios from 'axios'; +import { getQiniuToken } from '@/api/common' +import { getFileNameWithTime } from '@/utils' +import { Delta } from 'quill'; // 自定义图片处理模块 class ImageHandler { constructor(quill) { this.quill = quill; this.handlePaste = this.handlePaste.bind(this); - this.quill.root.addEventListener('paste', this.handlePaste); + this.quill.root.addEventListener('paste', this.handlePaste, true); } handlePaste(e) { @@ -42,13 +45,13 @@ class ImageHandler { if (items[i].type.indexOf('image') !== -1) { // 阻止默认粘贴行为 e.preventDefault(); + e.stopPropagation(); + // 保存当前光标位置 const range = this.quill.getSelection(true); - if (!range) return; - - // 阻止Quill默认的粘贴处理 - const currentHtml = this.quill.root.innerHTML; - this.quill.root.innerHTML = currentHtml; + if (!range) { + return; + } const file = items[i].getAsFile(); this.upload(file, range, this); @@ -61,9 +64,20 @@ class ImageHandler { if (!range) { return; } + // 本地上传 + if (vue.host === 'local') { + this.uploadLocal(file, range); + } + // 七牛云上传 + else { + this.uploadQiniu(file, range); + } + } + // 本地上传 + uploadLocal(file, range) { + console.log("本地上传", file); const formData = new FormData(); formData.append('file', file); - axios.post(process.env.VUE_APP_BASE_API + "/common/upload", formData, { headers: { Authorization: "Bearer " + getToken(), @@ -72,10 +86,7 @@ class ImageHandler { }).then(response => { const res = response.data; if (res.code === 200) { - // 插入上传后的图片到光标位置 - this.quill.insertEmbed(range.index, 'image', res.url); - // 将光标移动到图片后面 - this.quill.setSelection(range.index + 1); + this.handleUploadSuccess(res.url, range); } else { this.$message.error('图片上传失败'); } @@ -83,6 +94,37 @@ class ImageHandler { this.$message.error('图片上传失败'); }); } + // 七牛云上传 + uploadQiniu(file, range) { + console.log("七牛云上传", file); + getQiniuToken().then(tokenRes => { + if (tokenRes.code === 200) { + const formData = new FormData(); + let key = getFileNameWithTime(file.name); + let token = tokenRes.data; + + formData.append('file', file); + formData.append('key', key); + formData.append('token', token); + axios.post("https://up-z2.qiniup.com", formData, { + headers: { + 'Content-Type': 'multipart/form-data' + } + }).then(response => { + const res = response.data; + let url = process.env.VUE_APP_QINIU_DOMAIN + '/' + res.key; + this.handleUploadSuccess(url, range); + }); + + } + }) + } + handleUploadSuccess(url, range) { + // 插入上传后的图片到光标位置 + this.quill.insertEmbed(range.index, 'image', url); + // 将光标移动到图片后面 + this.quill.setSelection(range.index + 1); + } } // 注册自定义模块 @@ -120,6 +162,11 @@ export default { type: { type: String, default: "url", + }, + // 上传host，qiniu-七牛云，local-本地 + host: { + type: String, + default: 'qiniu' } }, data() { @@ -148,8 +195,15 @@ export default { ["link", "image", "video"] ], clipboard: { - matchVisual: false, - matchers: [] + matchVisual: false, + // 禁用默认的粘贴格式化 + matchers: [], + // 自定义粘贴处理 + customMatchers: [ + ['img', (node, delta) => { + return new Delta(); + }] + ] }, imageHandler: true }, diff --git a/src/views/bst/realName/index.vue b/src/views/bst/realName/index.vue index fc8961a..2ef758f 100644 --- a/src/views/bst/realName/index.vue +++ b/src/views/bst/realName/index.vue @@ -69,6 +69,9 @@ + @@ -80,13 +83,6 @@