使用 Django-imagekit 在 Django 中上传 Ajax 图像

Question

我一直在尝试在 Django 中上传图像文件。我遵循了几个教程，它们确实有所帮助，例如 this one 和 the one here。

虽然他们确实给出了正在发生的事情/如何思考它的基本概念，但我还不能将其转移到 ImageKit 的 ProcessedImageField 实现。

我的问题如下：我有几个 ProcessedImageFields。为了上传新图片，我使用了一个带有稍微修改的 ClearableFileIput 小部件的表单，它在标准的“选择文件”按钮上方显示一个缩略图。这工作得很好，用户可以选择几个文件（每个字段一个），在保存表单时一次性上传它们。 我使用 S3 使用 django-storages 存储数据。

我希望能够在它们上添加 ajax 上传功能，以便可以将图像处理从表单保存中委派出去。当用户选择图像时，它应该被上传并在文件处理后更新。然后，只有在用户实际保存表单时才应保留对模型的更改，否则应丢弃新文件。

任何想法从哪里开始寻找？也许有使用 Django-Imagekit 的项目使用现有的 django ajax 库之一？

Answer 1

ProcessedImageFields 实际上只是在保存图像之前执行图像处理（同步）的普通 Django ImageFields，而 Django ImageFields 实际上只是专门的 FileFields。因此，如果您使用的是 ProcessedImageFields，则与正常的表单文件处理没有什么不同；任何关于 AJAX 上传的非 Django 特定教程都应该同样适用。

就异步处理图像而言，您可以采用两种方法。

第一个是使用图像进行一次表单提交并返回该图像的 id，该图像可以与表单其余部分的第二次提交一起发送。在这种情况下，图像的处理是在服务器端同步完成的，但用户可以在它发生时对您的应用程序做其他事情。这使得最终提交的时间更短，因为文件已经发送，但在成功保存表单之前仍需要完成图像处理。您可以尝试查看 jQuery-File-Upload 的 Django 示例，但我不确定它们的效果或相关性。

另一方面，如果您想在服务器上真正异步地进行图像处理，那就有点复杂了。一种方法是在模型上设置两个独立的图像字段——一个用于原始图像，一个用于当前处理后的图像。在处理表单提交的视图中，您将原始图像保存在模型中并启动一个异步任务（使用Celery 或类似的东西）处理原始图像，然后将其保存到另一个字段。

至于丢弃新文件，您可能必须在定期运行的清理脚本中执行此操作。 （您要问的是图像被保留在服务器上，但在未保存时被丢弃，但服务器永远无法可靠地通知表单未保存。）