ckeditor5 vue检查图像已经被删除答案

【问题标题】：ckeditor5 vue check the image already removedckeditor5 vue检查图像已经被删除
【发布时间】：2019-03-16 02:14:24
【问题描述】：

我在this package 的文章表单中使用 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 手动进入服务器，否则我无法删除它。

有没有办法检查图像标签是否被删除，然后它将在服务器上删除。或者也许后端有一种方法可以检查该图像文件是否未被任何文章使用...

如果我两次上传相同的图像，那么它也会两次向服务器上传相同的文件，我如何检测相同的图像文件是否已经在服务器上并且不上传重复但立即返回图像路径

【问题讨论】：

标签： php laravel vue.js ckeditor5

【解决方案1】：

我使用这种方法，上传图片并保存 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
  }
}

【讨论】：