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

php PHP

谷若汐

2020-03-12

我正在开发一个社交博客,该博客具有内置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);
            });
        });
    }
}

第1316篇《在编辑器中管理上载文件的最佳方法?》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

3个回答
古一NearEva 2020.03.12

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

Green猿古一 2020.03.12

我使用以下内容将图像嵌入为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);
            } ) );
   };
}
理查德理查德 2020.03.12

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

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

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

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

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

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

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android