Javascript 使用ionic、angular和django+上传图像；restframework

我正在开发一个应用程序，我希望能够将照片上传到后端（restframework+django）

在后端方面，我遵循了这一点。 当我使用：

curl --verbose --header "Authorization: token {TOKEN}" --header "Accept: application/json; indent=4" --request POST --form photo=@/home/.../uyuni.jpg {DOMAIN}/api/users/1/photo/

这非常好用，文件已经创建好了，我可以在以后使用ngsrc检索它

然后，我想连接前端上传照片

在这里，我尝试了许多来自论坛或芭蕾舞团的想法，就像这样

我有两个不同的问题

• 如果我复制了最后一首芭蕾舞曲，我最终会收到400个错误的请求： 分析XML错误：aucunélément trouvéemposition:moz nullprincipal:{1b4583fc…}Numéro de ligne 1，Colonne 1: 我不知道它是来自后端还是mozilla。我读过关于CORS的问题，但这不应该是个问题，因为我使用的是离子代理

• 如果我用cordova插件摄像头连接，我有一个URL(file:///home/.../example.jpg)返回时，我不知道如何将其连接到FormData，以用于发布到后端：

我试图在fd中附加一个对象，比如

{path:photoURI，name:'blablabla'}

在本期中，我遇到了一个Django错误：

AttributeError at /api/users/1/photo/ 'str' object has no attribute 'name'

---

我可能还不太远，所以我不想使用外部代码片段。

我遇到了非常类似的问题，然后是一些问题。来自Ionic marketplace的这篇文章通过提供base64数据和uri供我使用解决了这个问题。

我遇到了非常类似的问题，还有一些问题。来自Ionic marketplace的这篇文章通过提供base64数据和uri供我使用解决了这个问题。

我最终解决了我的问题。哎哟

我在后端使用了这个：

import base64

from django.db.models import ImageField
from django.db.models.fields.files import ImageFieldFile
from django.core.files.uploadedfile import InMemoryUploadedFile


def upload_to(instance, filename):
    return 'profiles/' + filename


def wrap(content):
    class File(InMemoryUploadedFile):
        def read(self):
            return base64.b64decode(super().read())
    return File(content.file, content.field_name, content.name, content.content_type, content.size, content.charset)


class Base64ImageFieldFile(ImageFieldFile):
    def save(self, name, content, save=True):
        super().save(name, wrap(content), save=True)


class Base64ImageField(ImageField):
    attr_class = Base64ImageFieldFile

在前端：

要配置我的资源，请执行以下操作：

var userActions = getActions(User);
var updatePhotoHeader = angular.copy(auth_header);
updatePhotoHeader['CONTENT-TYPE'] = undefined;

userActions['updatePhoto'] = {
    method: "POST",
    url: API_URL + "users/:userId/photo/",
    params: {userId: "@userId"},
    headers: updatePhotoHeader,
    transformRequest: function (data) {
        if (!data) {return}
        var fd = new FormData();
        fd.append('photo', new Blob([data.photo], {type: 'image\/jpeg'}));
        return fd
    }
};

使用此摄像头选项（来自cordova插件）：

---

PS：这个解决方案可能不是最好的。还是希望找到一个更好的。但我现在要继续讲下去。

我终于解决了我的问题。哎哟

我在后端使用了这个：

import base64

from django.db.models import ImageField
from django.db.models.fields.files import ImageFieldFile
from django.core.files.uploadedfile import InMemoryUploadedFile


def upload_to(instance, filename):
    return 'profiles/' + filename


def wrap(content):
    class File(InMemoryUploadedFile):
        def read(self):
            return base64.b64decode(super().read())
    return File(content.file, content.field_name, content.name, content.content_type, content.size, content.charset)


class Base64ImageFieldFile(ImageFieldFile):
    def save(self, name, content, save=True):
        super().save(name, wrap(content), save=True)


class Base64ImageField(ImageField):
    attr_class = Base64ImageFieldFile

在前端：

要配置我的资源，请执行以下操作：

var userActions = getActions(User);
var updatePhotoHeader = angular.copy(auth_header);
updatePhotoHeader['CONTENT-TYPE'] = undefined;

userActions['updatePhoto'] = {
    method: "POST",
    url: API_URL + "users/:userId/photo/",
    params: {userId: "@userId"},
    headers: updatePhotoHeader,
    transformRequest: function (data) {
        if (!data) {return}
        var fd = new FormData();
        fd.append('photo', new Blob([data.photo], {type: 'image\/jpeg'}));
        return fd
    }
};

使用此摄像头选项（来自cordova插件）：

PS：这个解决方案可能不是最好的。还是希望找到一个更好的。但我现在要继续讲下去