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

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

Количество запросов может быть слишком большим (даже если есть бот)
В Ckeditor у меня есть процедура для загрузки, но не для ее удаления с сервера (или, по крайней мере, я не знаю, как)
и, наконец, это хорошая идея для автосохранения (?)

Мой редактор - это настроенная версия ckeditor5, и для загрузки файлов я использую uploadadapter, например:

export default class UploadAdapter {
    constructor(loader, article) {
        this.loader = loader;
        this.article = article;
    }
    upload() {
        return new Promise((resolve, reject) => {
            let image = new FormData();
            let url = '/articles/imageUpload';
            image.append('upload', this.loader.file);
            image.append('token', this.article.token);

            axios.post(url, image)
                .then(response => {
                    console.log(response);
                    if (response.data.uploaded) {
                        resolve({
                            default: response.data.url,
                        });
                    }
                    else {
                        reject(response.data.error.message);
                    }
                }).catch(error => {
                console.log(error);
            });
        });
    }
}

Ответ 1

Не знаю, что это поможет вам или нет. Но я использовал эту проблему для удаления изображения, как это.

Я использовал редактор summernote.

Шаги я последовал, когда я вставлял изображения с другим содержимым:

Собрано все изображения из редактора

$images = $dom->getelementsbytagname('img');

Здесь я получаю изображения как base64. вот почему мне нужно было их расшифровать и хранить отдельно

$imagePaths = [];
foreach($images as $k => $img){
        $data = $img->getattribute('src');
        $check_image = substr($data,0,10);
        if($check_image != "data:image"){
            continue;
        }
        list($type, $data) = explode(';', $data);
        list(, $data)      = explode(',', $data);
        $data = base64_decode($data);
        $image_name = time().$k.'.png';
        $path = public_path("/").ImagePaths::$BLOG_DETAILS_PICTURE.'/'.$image_name;
        file_put_contents($path, $data);
        $img->removeattribute('src');
        $img->setattribute('src', asset(ImagePaths::$BLOG_DETAILS_PICTURE.'/'.$image_name));
        $imagePaths[] = $path; // This path for store in DB
    }

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

Когда я работал над этим, я следил за этой документацией

Здесь я поделился полным скриптом контроллера.

Ответ 2

Я использовал ниже для встраивания изображений в качестве base64 вместо загрузки их

class UploadAdapter {
   constructor( loader ) {
      this.loader = loader;
   }

   upload() {
      return this.loader.file
            .then( file => new Promise( ( resolve, reject ) => {
                  var myReader= new FileReader();
                  myReader.onloadend = (e) => {
                     resolve({ default: myReader.result });
                  }

                  myReader.readAsDataURL(file);
            } ) );
   };
}

Ответ 3

Я рекомендую вам использовать файловый менеджер UniSharp laravel, это очень полезный пакет для загрузки файлов и изображений, он отлично работает с CKeditor, TinyMCE и другими редакторами.