ckeditor5 vue проверить изображение уже удалено - PullRequest
Новая
       9

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

0 голосов
/ 11 октября 2018

Я использую версию 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 вручную.

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

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

1 Ответ

0 голосов
/ 30 октября 2018

Я использую этот метод, загружаю изображения и сохраняю 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)
       }
     }
   });
}}

enter image description here

Сервер: 

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