Quill编辑器+ VueJS2图像上传:Base64图像到URL

Question

使用此处的编辑器:https://github.com/surmon-china/vue-quill-editor

我想将图像从Quill编辑器保存到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);
    });
},

我试过这个:添加对自定义图像处理程序的支持 但它不起作用,因为图像始终为true并且回调未定义.

试过这个:Quill imageHandlerDemo 第一个链接有同样的问题.

目前服务器硬编码返回" http://localhost/images/php.jpg "

如果可能的话我不会使用任何库(jQuery,dropzone等)

我想我可以检查是否在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>