奎爾編輯+ VueJS2圖片上傳：Base64編碼的圖像從這裏URL

Question

使用編輯：https://github.com/surmon-china/vue-quill-editor

我想保存從奎爾編輯MySQL數據庫的圖像，但用base64更大的圖像太長插入。

我試圖編寫自定義圖像處理程序，以便它自動上傳圖像到服務器和服務器返回圖像URL，但現在我卡住了。

這是我目前的HTML：

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

添加圖像處理程序來編輯這樣的：

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

和我自己的處理程序：

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); 
    }); 
}, 

我嘗試這樣做：Add support for custom image handler 但它不起作用，因爲圖像總是真實的，回調是未定義。

也試過這個：Quill imageHandler Demo 它有同樣的問題第一個環節。

目前服務器是硬編碼返回「http://localhost/images/php.jpg」

如果可能的話，我不會使用任何庫（jQuery的，懸浮窗等）

我想我或許可以檢查，如果圖像是在onEditorChange插入（） ，然後發送請求到服務器，獲取URL，在編輯器中搜索這個base64，並用URL替換它，但看起來不正確。

Answer 1

一套處理程序在你的選擇這樣的

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>