ckeditor5 vue檢查圖像已刪除

Question

我正在使用此軟件包中的文章表格使用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手動進入服務器，然后將其自己刪除，否則我無法刪除它。

有什么方法可以檢查圖像標記是否被刪除，然后它將在服務器上刪除。 或者也許后端有一種方法可以檢查任何文章是否都沒有使用此圖像文件...

並且如果我兩次上傳相同的圖像，那么它將兩次也將同一文件上傳到服務器兩次，如何檢測服務器上是否已存在相同的圖像文件，而不是上傳重復的圖像，而是立即返回圖像路徑

Answer 1

我使用這種方法，上傳圖像並保存URL。 當我發送編輯器的內容時​​，還會發送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
  }
}