Vue3 설정 구문 설탕은 서식 있는 텍스트 편집기 quill-image-extend-module에서 이미지를 업로드하기 위한 너무 긴 64비트 코드 문제를 해결합니다.

소개:

• 서식 있는 텍스트 편집기로 업로드된 이미지는 64비트로 디코딩되므로 이미지가 너무 길면 데이터베이스에서 오류를 보고하게 됩니다.
• 첫 번째 방법: 데이터베이스 유형을 다음으로 변경합니다.mediumtext
• 두 번째 방법: 이 문서의 방법

이 기사에서 사용된 구문 설탕은 Vue3 설정 구문입니다.<script setup>

思路

• 리치 텍스트 편집기의 이미지 업로드 기능을 가로채십시오. 즉, 버튼을 클릭하여 이벤트를 업로드된 이미지 에 바인딩 input하거나upload
• 이미지를 자신의 서버에 업로드하고 URL 주소를 반환하세요.
• URL 주소를 데이터베이스에 저장하고 표시할 때 직접 매핑합니다.

1단계: 설치quill-image-extend-module

npm install quill-image-extend-module --save-dev

파트 2: 글로벌 등록main.js

// 富文本编辑器
import {
    
     QuillEditor,Quill } from '@vueup/vue-quill'
import '@vueup/vue-quill/dist/vue-quill.snow.css';
import {
    
    container,QuillWatch,ImageExtend} from "quill-image-extend-module";
Quill.register('modules/ImageExtend', ImageExtend)

const app = createApp(App)
app.component('QuillEditor', QuillEditor)

3단계: 구성 요소 참조（引入我的部分代码，不相关部分已去除）

// 说明 引入input是借助input的图片上传请求，来回显到富文本编辑器里，按钮是隐藏的。
<template>
      <QuillEditor
          v-model:content="form.productParaImgs"
          contentType="html"
          theme="snow"
          ref="productParaImgsForm"
          :options="productParaImgsEditorOption"
          @change="onEditorChange($event)"
          style="height:200px"
      ></QuillEditor>
      <input
          type="file"
          accept=".png,.jpg,.jpeg"
          @change="productParaImgsChange"
          id="productParaImgsUpload"
          style="display: none;border: 4px solid red"
      />
</template>

<script setup>
import {
    
    container, ImageExtend, QuillWatch} from 'quill-image-extend-module'
const productParaImgsForm = ref(null);

// 富文本编辑器 参数设置
const productParaImgsEditorOption = ref({
    
    
  placeholder: "请输入",
  theme: "snow",
  modules: {
    
    
    ImageExtend: {
    
      // 如果不作设置，即{}  则依然开启复制粘贴功能且以base64插入
      name: 'img',  // 图片参数名
      size: 3,  // 可选参数 图片大小，单位为M，1M = 1024kb
      action: '',  // 富文本服务器地址（不用）
      // response 为一个函数用来获取服务器返回的具体图片地址（不用）
      response: (res) => {
    
    
      },
      headers: (xhr) => {
    
    
      // 请求头，携带token
        xhr.setRequestHeader('token', window.sessionStorage.getItem('token'))
      },
    },
    // 核心步骤，在富文本点击图片按钮的一刻判断，走input的change事件，即-将图片上传到服务器，再返回url地址用来保存。
    toolbar: {
    
    
      container: container,  // container为工具栏，此次引入了全部工具栏，也可自行配置
      handlers: {
    
    
        'image': function (value) {
    
      
        // 如果点击了富文本的图片按钮
          if (value) {
    
    
            // 触发 input的事件 （productParaImgsUpload为input的id）
            document.querySelector("#productParaImgsUpload").click();
          } else {
    
    
            this.quill.format("image", false);
          }
        }
      }
    }
  }
})


// input按钮绑定的change事件
const productParaImgsChange = async (e) => {
    
    
// 后端用 MultipartFile file 来接收文件，前端则用formData来封装。
  let formData = new FormData();
  let file = e.target.files[0]; // 固定写法，可自行打印查看
  formData.append('file', file);
  // requestUitl.post 是我封装的请求，可自行改成ajax
  let result = await requestUitl.post("/sys/product/uploadImage", formData);
  if (result.data.code == 647) {
    
    
  // Vue3 setup 语法 productParaImgsForm.value.getQuill()
  // vue2用 this.$ref.productParaImgsForm.quill
    let quill = productParaImgsForm.value.getQuill() // 获取这个富文本的光标
    //光标位置
    let length = quill.getSelection().index; 
    // 插入图片 图片地址是拼接的 
    // getServerUrl()是你的请求头，替换即可
    // result.data.src 是后端返回的url
    quill.insertEmbed(length, "image", getServerUrl() + result.data.src);  
    // 调整光标内容后面
    quill.setSelection(length + 1); 
  }
}
</script>

백엔드 반환 유형 참조

Map<String, Object> dataMap = new HashMap<>();
dataMap.put("title", newFileName);  // 文件名
dataMap.put("src", "image/product/" + newFileName); // 请求路径，拼接getServerUrl()即可用

패키지 참조 요청

export function post(url, params = {
    
    }) {
    
    
    return new Promise((resolve, reject) => {
    
    
        httpService({
    
    
            url: url,
            method: 'post',
            data: params
        }).then(response => {
    
    
            resolve(response);
        }).catch(error => {
    
    
            reject(error);
        });
    });
}
export default {
    
    
    post,
    getServerUrl
}