羽毛笔编辑器 + 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);
});
},

我试过这个：添加对自定义图像处理程序的支持 但它不起作用，因为图像始终为真，回调未定义。

也试过这个： 鹅毛笔imageHandler演示 它的第一个链接有同样的问题。

当前服务器被硬编码为返回"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>

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 your position cursor
const range = this.$refs.quillEdit.quill.getSelection()
//this code to set image on your server to quill editor
this.$refs.quillEdit.quill.insertEmbed(range.index , 'image', `http://your.api/${r}`)
})
.catch(e => {
console.log('error')
}
}
}

Answer 3

import React, { useState, useEffect } from 'react';
// ** Reactstrap Imports
import {
Row,
Form,
Modal,
ModalHeader,
ModalBody,
Col
} from 'reactstrap'
import { useTranslation } from 'react-i18next'
import { useQuill } from 'react-quilljs';
import 'quill/dist/quill.snow.css'
export default function ReadingModal({ open, handleModal, datas })
{
const { t } = useTranslation()
const [ News, setNews ] = useState(datas || '')
return (
<Modal isOpen={open} toggle={handleModal} className="modal-dialog-centered modal-lg" onClosed={handleModal}>
<ModalHeader className='bg-transparent pb-0' toggle={handleModal} ></ModalHeader>
<ModalBody className="px-sm-3 pt-30 pb-3">
<div className='text-center'>
<h4>{News && News['title']}</h4>
</div>
<Row tag={Form} className="gy-1">
<Col>
{News && News['body']}
</Col>
</Row>
</ModalBody>
</Modal>
);
};