javascript — редактор Quill загрузка изображений VueJS2: изображение Base64 в URL

Редактор Quill загрузка изображений VueJS2: изображение Base64 на URL

Используя редактор отсюда: https://github.com/surmon-china/vue-quill-editor

Я хочу сохранить изображения из редактора Quill в базу данных MySQL, но большие изображения в base64 слишком длинные для вставки.

Я попытался написать собственный обработчик изображения, чтобы он автоматически загружал изображение на сервер, а сервер возвращает URL изображения, но теперь я застрял.

Вот мой текущий HTML:

 {amp}lt;quill-editor v-model="content" :options="editorOption" @onEditorBlur($event)" @onEditorFocus($event)" @onEditorReady($event)" @onEditorChange($event)"{amp}gt; {amp}lt;/quill-editor{amp}gt; 

Добавляем обработчик изображений в редактор следующим образом:

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

Я попробовал это: добавить поддержку пользовательского обработчика изображений, но это не работает, так как изображение всегда истинно, а обратный вызов не определен.

Пробовал это тоже: Quill imageHandler Demo У него те же проблемы с первой ссылкой.

В настоящее время сервер жестко задан для возврата » http: //localhost/images/php.jpg «

Если возможно, я бы не использовал никаких библиотек (jQuery, dropzone и т. Д.)

Я подумал, что, возможно, смогу проверить, вставлено ли изображение в onEditorChange (), затем отправить запрос на сервер, получить URL, найти этот base64 в редакторе и заменить его на URL, но это кажется неправильным.

Понравилась статья? Поделиться с друзьями:
JavaScript & TypeScript
Adblock
detector