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

我试过了：Add support for custom image handler 但它不起作用，因为图像始终为真，并且回调未定义。

也试过这个：Quill imageHandler Demo 第一个链接也有同样的问题。

目前，服务器已硬编码以返回“http://localhost/images/php.jpg”

如果可能，我不会使用任何库（jQuery，dropzone等）

我想我可以检查是否在onEditorChange（）中插入了图像，然后向服务器发送请求，获取URL，在编辑器中搜索此base64并将其替换为URL，但这似乎不对。

Answer 1

在您的选项中设置处理程序，如

polymer serve --open

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
    
    
  }
}

Answer 2

这是我的源代码。...

//Template
<input type="file" @change="uploadFunction" id="file" hidden>

<quill-editor 
      v-model="model" 
      :options="editorOption" 
      ref="quillEdit">
</quill-editor>

和脚本

//script
import "quill/dist/quill.core.css";
import "quill/dist/quill.snow.css";
import "quill/dist/quill.bubble.css";
import Quill from "quill";
import { quillEditor } from "vue-quill-editor";
import ImageResize from "quill-image-resize-module";
import axios from '~/plugins/axios'

export default {
  data() {
    model: '',
    selectedFile : '',
    editorOption: {
        // some quill options
        modules: {
          toolbar: {
            container: [["bold", "image"]],
            handlers: {
              image: function() {
                document.getElementById('file').click()
              }
            }
          },
          imageResize: {
            modules: ["Resize", "DisplaySize", "Toolbar"]
          }
        }
      },
   },
   methods: {
    uploadFunction(e){
         this.selectedFile = e.target.files[0];

      var form = new FormData();
      form.append("file", this.selectedFile);
      form.append("name", this.selectedFile.name);

        //upload image to server
        axios.post('media-save', form,{
         'headers': {
             'Content-Type': "multipart/form-data"
          }
         })
        .then(r => {
          console.log('success')

          //this code to set image on your server to quill editor
          this.$refs.quillEdit.quill.insertEmbed(10, 'image', `http://your.api/${r}`)
        })
        .catch(e => {
          console.log('error')
     }
   }
}

Quill编辑器+ VueJS2图片上传：Base64图片到网址

2 个答案: