在我的编辑器中管理上传文件的最佳方式？

php vue.js laravel ckeditor

2022-08-30 20:09:20

我正在开发一个社交博客，该博客有一个用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

我使用下面的内容将图像嵌入为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);
            } ) );
   };
}

答案 2

恕我直言，首先你应该定义你的目标，然后寻找解决方案。

您是否希望您的用户拥有一个功能丰富的文件管理器？这将允许他们从已经上传的图像中进行选择。一个人可以准备和上传图像，其他人只需选择它们并将它们粘贴到编辑器中即可。
您是否只愿意拥有拖放解决方案并将这些图像上传到某个地方而不必担心存储？
您是否需要跟踪对已编辑内容的更改？
是否要允许最终用户重复使用已上载的文件？

根据需求，管理从内容中删除的图像可能很棘手。例如，如果您想跟踪更改并允许用户在其他帖子中重复使用上传的图像 - 在从存储中删除任何图像之前，您应该检查所有帖子和所有版本（如果它们不再包含此图像）。OTOH如果您不关心版本并且不允许用户重复使用图像 - 那么您可以在从内容中删除任何图像后立即将其删除。

如今，存储很便宜，所以我不会为保留一些不再使用的额外图像而烦恼。更重要的是 - 我不会将清理添加到主流中。而不是那样 - 创建一个专用的重复作业来扫描内容并删除未使用的图像。为了使它更加健壮，我会将图像用法保存在某种数据库中。这样，执行清理会容易得多。

有开箱即用的付费解决方案，如EasyImage（上传，重新缩放和优化图像到CDN）或CKFinder（功能齐全的文件管理器）。

但是，根据您的需求，您可能需要调整这些解决方案。例如，如果您有文件管理器，那么如果文件在任何地方使用，您可能希望阻止删除文件。因此，可能需要对某些插件进行额外的工作。