angularjs - 将图像从前端应用程序保存到后端 API 的正确方法

Question

在我的例子中，我将 AngularJS 和 Django 后端与 Django Rest 框架一起使用。所以我需要用图像保存一个配置文件数据。我在数据库中的模型如下所示：

class Profile(models.Model):
    first_name = models.CharField()
    avatar = models.ImageField()

但我无法决定在前端保存此图像的最佳方式。

解决方案 1 - 将图像转换为 base64 并Base64Serializer在 Django 中创建：

https://xploit29.com/2016/09/13/upload-files-to-django-rest-framework-using-angularjs/

对我来说最简单的方法

解决方案 2 - 使用 AngularJS 上传多部分/表单数据文件

https://withintent.uncorkedstudios.com/multipart-form-data-file-upload-with-angularjs-c23bf6eeb298

我不喜欢这样的事情：

$http.post(uploadUrl, fd, {
    transformRequest: angular.identity,
    headers: {'Content-Type': undefined} 
}) 

看起来像黑客。在后端也是如此。我们需要使用https://www.django-rest-framework.org/api-guide/parsers/#multipartparser

解决方案 3 - 创建一个单独的视图来上传文件并将数据库更改为：

class Image(models.Model):
   image = models.ImageField()

class Profile(models.Model):
    first_name = models.CharField()
    avatar = models.ForeignKey('Image', null=True, blank=True, on_delete=NULL)

在现有数据库上使用很复杂，但看起来非常灵活。还要使用方案二实现文件上传

标签： angularjsdjangodjango-rest-framework