ckeditor5 vue проверить изображение уже удалено

я использую ckeditor5 vue версию для моей статьи из этот пакет и это также идет с примером обработки загрузки изображений, добавив этот код

UploadAdapter: function (loader) {
this.loader = loader
this.upload = () => {
const body = new FormData();
body.append('gambar', this.loader.file);

let token = window.localStorage.getItem('token');

return fetch('https://bkcuvue.test/api/v1/artikel/upload', {
headers: {"Authorization": 'Bearer ' + token},
body: body,
method: 'POST'
})
.then(response => response.json())
.then(downloadUrl => {
return {
default: downloadUrl
}
})
.catch(error => {
console.log(error);
});
}
this.abort = () => {
console.log('Abort upload.')
}
},

а потом на моем бэкэнде (laravel) просто так

public function upload(Request $request)
{
if(!empty($request->gambar))
$fileName = Helper::image_processing($this->imagepath,$this->width,$this->height,$request,'');
else
$fileName = '';

return response()->json('/' . $this->imagepath . $fileName . '.jpg');
}

к компоненту ckeditor

<vue-ckeditor type="classic" v-model="htmlContent" :upload-adapter="UploadAdapter"></vue-ckeditor>

и это работает! но проблема, которую я скоро осознаю, заключается в том, что этот метод загружает изображение на сервер, а затем возвращает путь к изображению или редактору, который будет сохранен в базе данных в виде простых HTML-тегов …

затем, если, например, я загружаю изображение, а затем я хочу удалить или, возможно, изменить изображение, тогда редактор удалит тег img из редактора, но не файл реального изображения на сервере ….

файл образа останется на сервере, и я не смогу удалить его, если я не выберу образ и не удалю его сам, зайдя на сервер по ftp или ssh вручную.

есть ли способ проверить, удаляется ли тег изображения, тогда он будет удален на сервере. Или, может быть, есть способ проверить, не используется ли этот файл изображения какой-либо статьей …

а также, если я загружаю одно и то же изображение дважды, оно также будет загружать на сервер дважды один и тот же файл, как я могу определить, что один и тот же файл изображения уже есть на сервере, и не загружать дубликаты, а немедленно вернуть путь к изображению

0

Решение

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

Клиент:

onChange={ ( event, editor ) => {

this.state.description = editor.getData();

var vm = this

var urls = Array.from( new DOMParser().parseFromString( editor.getData(), 'text/html' )
.querySelectorAll( 'img' ) )
.map( img => img.getAttribute( 'src' ) );

urls.forEach(function(element) {
if (String(element).length > 10) {
if (vm.state.filesCKeditor.length > 0) {
if(filter(vm.state.filesCKeditor, function(o) { return String(o) === String(element) }).length == 0)
{
vm.state.filesCKeditor.push(element)
}
}else{
vm.state.filesCKeditor.push(element)
}
}
});
}}

введите описание изображения здесь

Сервер:

foreach (explode(',',$this->post('filesCKeditor')) as $value) {
# code...
if (!isset(explode($value,$this->post('content'))[1])) {
print_r('false');//add code for delete image
}
}
0

Другие решения

Других решений пока нет …