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

Php 在我的编辑器中管理上载文件的最佳方法?,php,laravel,vue.js,ckeditor,Php,Laravel,Vue.js,Ckeditor,我正在开发一个社交博客,它有一个内置JavaScript的编辑器,用于用户创建博客。我最大的问题之一是上传文件及其限制。现在,为了自动保存用户帖子,我存储同时上传到服务器的图像。但问题是当用户从编辑器中删除图像时,因为: 请求的数量可能太多(即使有很多请求) 在Ckeditor中,我有一个上传过程,但并没有从服务器上删除它的过程(或者至少我不知道如何删除) 最后,这是自动储蓄的好主意(?) 我的编辑器是ckeditor5的自定义版本,对于上载文件,我使用了uploadadapter,如: e

我正在开发一个社交博客,它有一个内置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);
            });
        });
    }
}
我不知道这对你有没有帮助。但我曾经解决过这个问题 像这样的图像问题

我用过编辑

插入包含其他内容的图像时遵循的步骤:

从编辑器收集所有图像

$images = $dom->getelementsbytagname('img');
$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
    }
这里我以base64的形式接收图像。这就是为什么我需要对它们进行解码并单独存储的原因

$images = $dom->getelementsbytagname('img');
$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
    }
当我删除或更新内容时,我只需删除以前在
$imagepath
数组中接收并存储的所有图像。

当我处理这个问题时,我遵循了文档


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

我使用以下命令将图像嵌入为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);
            } ) );
   };
}

我想你应该首先确定你的目标,然后寻找解决方案

  • 您希望您的用户拥有一个功能丰富的文件管理器吗?这将允许他们从已经上传的图片中进行选择。一个人可以准备和上传图像,其他人只需选择它们并将它们粘贴到编辑器中
  • 您是否愿意使用拖放解决方案将这些图像上传到某个地方,而不必担心存储空间
  • 是否需要跟踪编辑内容的更改
  • 是否允许最终用户重新使用已上载的文件
根据需要,管理从内容中删除的图像可能很棘手。例如,如果您希望跟踪更改并允许用户在其他帖子中重复使用上载的图像-在从存储中删除任何图像之前,您应该检查所有帖子和所有版本(如果它们不再包含此图像)。如果你不关心版本,不允许用户重复使用图片,那么你可以在图片从内容中删除后删除它

现在的存储空间很便宜,所以我不必为保留一些不再使用的额外图像而烦恼。更重要的是,我不会将清理添加到主流中。相反,创建一个专用的重复作业,用于扫描内容和删除未使用的图像。为了使它更健壮,我会将图像使用情况保存在某种数据库中。这样就更容易进行清理

有现成的付费解决方案,如(向CDN上传、重新缩放和优化图像)或(功能齐全的文件管理器)


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

似乎您只需要一个额外的隐藏输入,记录所有成功上传的图像,并在用户发布表单后在编辑器中与图像的URL进行一点比较,然后您将获得要删除的图像列表。

我希望我能清楚地表达我的意思。

6票3星,似乎是一个热门话题。格拉茨。“但问题是当用户从编辑器中删除图像时”那会是什么问题?我们在您的服务器端遗漏了一些信息,但我认为您需要一种方法来唯一标识上载的图像,并在您的服务器端使用散列和方法来删除它谢谢您的投票,我试图澄清我的问题@kerbholz@kerbholz是的,我认为这是一个常见的问题,我的应用程序使用不同的堆栈,但在编辑器中上载图像的功能相同,但是当用户删除图像时,我会进行不必要的上载,因为一旦用户插入图像,它就会被删除uploaded@Badgy事实上这就是问题:))会话是否可以作为一个选项?我的意思是在会话中保存所有内容,最后上传最后一个版本。它安全吗?base64是替代方案,但不是最佳做法,因为它从长远来看会影响服务器性能