Question

我正在开发一个社交博客，该博客具有内置于javascript中的编辑器，用于由用户创建博客。我最大的问题之一是上传文件及其限制。现在，为了自动保存用户帖子，我将同时上传的图像存储到服务器，但是问题是当用户从编辑器中删除图像时，原因是：

请求数量可能太多（即使有机器人的情况）
在Ckeditor中，我有一个上传过程，但是没有从服务器删除它的过程（或者至少我不知道如何）
最后是自动保存（？）的好主意

我的编辑器是ckeditor5的自定义版本，对于上传文件，我使用诸如：p的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);
            });
        });
    }
}

Answer 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数组中接收并存储的所有图像。

从事此工作时，我遵循了this文档

Here我共享了完整的控制器脚本。

Answer 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);
            } ) );
   };
}

Answer 3

恕我直言，首先您应该定义目标，然后搜索解决方案。

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

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

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

有一些现成的付费解决方案，例如EasyImage（将图像上传，重新缩放和优化到CDN）或CKFinder（功能齐全的文件管理器）。

尽管如此，根据您的需要，您可能仍需要调整这些解决方案。例如，如果您有文件管理器，则可能希望阻止删除文件（如果在任何地方使用它们）。因此，可能需要对某些插件进行其他工作。

Answer 4

似乎您只需要一个额外的隐藏输入即可记录所有成功上传的图像，并在用户发布表单后在编辑器中与图像的url进行一些比较，然后您将获得图像列表。已删除。
我希望我已经清楚表达了我的意思。

在编辑器中管理上载文件的最佳方法？

4 个答案: