У меня есть 2 проблемы, которые я не могу найти решение.Я использую Laravel 5.6 Vue JS Component TinyMCE 4.9.1
Я создал компонент vueJs для своей формы, который включает в себя TinyMce, и похоже, что пока все работает.На стороне сервера я создаю папку для каждого создаваемого сообщения, и имя папки сохраняется в таблице сообщений, поэтому при удалении сообщения необходимо удалить папку со всеми фотографиями.Прежде всего, у меня есть проблема понимания.Я думал, что если я установлю automatic_uploads: false, , фотография не будет загружена сразу, но это так.Если этого не произойдет, то моя первая проблема будет решена, потому что все фотографии будут загружены одновременно.
Давайте предоставим исходный код для лучшего понимания:
my vueJs Component
<template>
<div>
<form method="post" action="" @submit.prevent="onSubmit">
<fieldset class="add-form"><legend class="add-form">
<h3>Article Details</h3></legend>
<label class="required" for="fname">Headline</label>
<input class="form-control" v-model="post.title" id="fname">
<span class="invalid-feedback" v-text="errors.get('title')"></span>
<input class="form-control" v-model="folder" id="folder">
<tinymce v-model="post.body"
:plugins="myPlugins"
:toolbar ="myToolbar1"
:init="myInit"
>
</tinymce>
<script>
import Editor from '@tinymce/tinymce-vue';
// Import TinyMCE
import tinymce from 'tinymce/tinymce';
// A theme is also required
import 'tinymce/themes/modern/theme';
export default{
components: {
'tinymce': Editor // <- Important part
},
data () {
return {
name: 'app',
folder: null,
myModel:'',
theme: "modern",
myToolbar1: 'undo redo | bold italic underline forecolor backcolor | alignleft aligncenter alignright alignjustify | hr bullist numlist outdent indent | link image table | code preview',
myPlugins: "link image code preview imagetools table lists textcolor hr wordcount",
myInit: {
setup: function(editor){
automatic_uploads: false,
editor.on('NodeChange', function (e) {
if(e.element.tagName === "IMG"){
//e.element.setAttribute("data-original", e.element.currentSrc);
// e.element.setAttribute("src", newSrc);
}
});
},
images_dataimg_filter: function(img) {
return false;
return img.hasAttribute('internal-blob');
},
convert_urls : false,
height:500,
automatic_uploads: false,
images_upload_base_path: '/../../',
relative_urls : false,
// override default upload handler to simulate successful upload
images_upload_handler: function (blobInfo, success, failure) {
var xhr, formData;
xhr = new XMLHttpRequest();
xhr.withCredentials = false;
xhr.open('POST', '/memberarea/api/upload-image');
var token = document.head.querySelector("[name=csrf-token]").content;
xhr.setRequestHeader("X-CSRF-Token", token);
xhr.onload = function() {
var json;
var folder2;
if (xhr.status != 200) {
failure('HTTP Error: ' + xhr.status);
return;
}
json = JSON.parse(xhr.responseText);
if (!json || typeof json.location != 'string') {
failure('Invalid JSON: ' + xhr.responseText);
return;
}
success(json.location);
this.folder = json.folder;
};
formData = new FormData();
formData.append('file', blobInfo.blob(), blobInfo.filename());
xhr.send(formData);
}
},
result:[],
"post": {
title: '',
teaser:'',
body: '',
tags:[],
},
errors: new Errors(),
availableTags:'',
tags:[],
}},
computed: {},
mounted: function () {
this.getTags();
},
methods: {
getTags(){
axios.get('/api/tags/id')
.then((response) => {
this.availableTags = response.data;
})
.catch(function () {
});
},
onSubmit(){
{
let uri = '/admin/news/save-post';
var input = this.post;
axios.post(uri, input)
.then((response) => {
window.location.href = response.data.redirect;
})
.catch(error => this.errors.record(error.response.data.errors));
}
}
}
}
ИзображениеКонтроллер для загрузки изображения:
public function uploadImages()
{
$folder = uniqid();
if (!\Storage::exists($folder)) {
\Storage::disk('posts')->makeDirectory($folder);
}
$imgpath = \Storage::disk('posts')->put($folder,request()->file('file'));
return \Response::json(['folder' => $folder, 'location' => '/storage/uploads/posts/'.$imgpath]);
}
Теперь у меня возникла следующая проблема.Я выбираю фотографию, папка создается, фотография загружается.Если я добавлю еще одну фотографию, будет создана новая папка вместо ее загрузки в ту же папку.Поэтому я решил вернуть имя Foldername из функции загрузки обратно в компонент, сохранить его в скрытом поле ввода и снова отправить обратно в метод загрузки, к сожалению, я уже не могу установить значение в поле скрытого ввода.Теперь вопрос, как это можно решить лучше всего?Любое предложение приветствуется.
Вторая проблема, я интегрировал плагин imagetools, но как только я его использую, он превращает изображение в BLOB-объект.опять же, я не понимаю инструкции правильно, но я подумал, добавив ниже, это отключит, но не повезло.Таким образом, я могу сохранить изображение в виде большого двоичного объекта и одновременно сохранить его в папке, и в следующий раз в базе данных будет сохранен только путь.Как я могу решить это?
images_dataimg_filter: function(img) {
return false;
// return img.hasAttribute('internal-blob');
},