Einführung:
Das vom Rich-Text-Editor hochgeladene Bild wird in 64 Bit dekodiert, was dazu führt, dass die Datenbank einen Fehler meldet, wenn es sehr lang ist.
Die erste Methode: Ändern Sie den Datenbanktyp in mediumtext
Die zweite Methode: die Methode in diesem Artikel
Beachten Sie, dass der in diesem Artikel verwendete Syntaxzucker die Vue3-Setup-Syntax ist <script setup>
思路
Fangen Sie die Bild-Upload-Funktion des Rich-Text-Editors ab, dh klicken Sie auf die Schaltfläche, um das Ereignis an das hochgeladene Bild zu binden input
oder upload
Laden Sie das Bild auf Ihren eigenen Server hoch und geben Sie die URL-Adresse zurück
Speichern Sie die URL-Adresse in der Datenbank und ordnen Sie sie bei der Anzeige direkt zu
Schritt 1: Installation quill-image-extend-module
npm install quill- image- extend- module -- save- dev
Teil 2: Globale Registrierung 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)
Schritt 3: Komponentenreferenz (引入我的部分代码,不相关部分已去除)
< 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: {
name: 'img' ,
size: 3 ,
action: '' ,
response: ( res) = > {
} ,
headers: ( xhr) = > {
xhr. setRequestHeader ( 'token' , window. sessionStorage. getItem ( 'token' ) )
} ,
} ,
toolbar: {
container: container,
handlers: {
'image' : function ( value) {
if ( value) {
document. querySelector ( "#productParaImgsUpload" ) . click ( ) ;
} else {
this. quill. format ( "image" , false) ;
}
}
}
}
}
} )
const productParaImgsChange = async ( e) = > {
let formData = new FormData ( ) ;
let file = e. target. files[ 0 ] ;
formData. append ( 'file' , file) ;
let result = await requestUitl. post ( "/sys/product/uploadImage" , formData) ;
if ( result. data. code == 647 ) {
let quill = productParaImgsForm. value. getQuill ( )
let length = quill. getSelection ( ) . index;
quill. insertEmbed ( length, "image" , getServerUrl ( ) + result. data. src) ;
quill. setSelection ( length + 1 ) ;
}
}
< / script>
Referenz zum Back-End-Rückgabetyp
Map< String, Object> dataMap = new HashMap< > ( ) ;
dataMap. put ( "title" , newFileName) ;
dataMap. put ( "src" , "image/product/" + newFileName) ;
Verpackungsreferenz anfordern
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
}