Quill Editor + VueJS2 Hochladen von Bildern: Base64 Bild URL

Question

Mit Editor von hier: https://github.com/surmon-china/vue-quill-editor

Ich möchte Bilder von Quill Editor zu MySQL-Datenbank speichern, aber größere Bilder in Base64 sind zu lang einzufügen.

Ich habe versucht, benutzerdefinierte Bild-Handler zu schreiben, so dass es Bild automatisch auf den Server hochlädt und der Server die Bild-URL zurückgibt, aber jetzt stecke ich fest.

Hier ist meine aktuelle HTML:

<quill-editor v-model="content" 
    :options="editorOption" 
    @onEditorBlur($event)" 
    @onEditorFocus($event)" 
    @onEditorReady($event)" 
    @onEditorChange($event)"> 
</quill-editor> 

Bild-Handler wie folgt Editor Hinzufügen:

onEditorReady(editor) { 
    editor.getModule('toolbar').addHandler('image', this.imageHandler); 
    console.log('editor ready!', editor); 
}, 

Und mein eigener Handler:

imageHandler(image, callback){ 
    console.log(image); // Always true 
    console.log(callback); // Always undefined 

    // Should get image in here somehow.. 
    var sendData = { 
     image: 'SomethingShouldBeInHere', 
    }; 

    // Send image to server, 
    // Server will return link to image 
    axios.put('/testImageUpload', sendData) 
    .then(function(cbData) { 
     // In here should add image tag to editor somehow.. 

    }) 
    .catch(function (error) { 
     console.log(error); 
    }); 
}, 

ich das versucht: Add support for custom image handler Aber es funktioniert nicht, da Bild immer wahr ist und Callback ist nicht definiert.

Versucht dies auch: Quill imageHandler Demo Es hat die gleichen Probleme erste Verbindung.

Derzeit Server fest einprogrammiert zurückzukehren „http://localhost/images/php.jpg“

Wenn möglich, dass ich keine Bibliotheken (jQuery, Dropzone, etc.)

Ich dachte, ich war vielleicht sollte das Bild in onEditorChange, nutzen würde überprüfen() , dann sende eine Anfrage an den Server, erhalte die URL, suche nach dieser base64 im Editor und ersetze sie mit der URL, aber es scheint nicht richtig zu sein.

Answer 1

Set-Handler in Ihre Optionen wie dieser

editorOption: { 
 
    modules: { 
 
    toolbar: { 
 
    container: [['image'], ...], 
 
    handlers: { 
 
    'image': function(){ 
 
     document.getElementById('getFile').click() 
 
    } 
 
    } 
 
    } 
 
    } 
 
} 
 

 

 
methods: { 
 
    uploadFunction(e){ 
 
    
 
    //you can get images data in e.target.files 
 
    //an single example for using formData to post to server 
 
    
 
    
 
    var form = new FormData() 
 
    form.append('file[]', e.target.files[0]) 
 
    
 
    //do your post 
 
    
 
    
 
    } 
 
}

<template> 
 
    <quill-editor v-model="content" 
 
      :options="editorOption" 
 
      @change="oneEditorChange($event)"> 
 
    </quill-editor> 
 
    <input type="file" id="getFile" @change="uploadFunction($event)" /> 
 
</template>