javascript - 使用 ionic、Angular 和 django+rest 框架上传图像

Question

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

对于后端，我遵循了这个tutorial 。当我使用时:

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

这工作得很好，文件确实被创建了，之后我可以使用 ng-src 检索它。

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

在这里，我从论坛或教程中尝试了很多想法 one

我有两个不同的问题。

• 如果我复制最后一个教程，我最终会收到 400 Bad Request:XML 分析错误:错误位置:moz-nullprincipal:{1b4583fc...} Numéro de ligne 1, Colonne 1 :我不知道它是来自后端还是mozilla。我读到了有关 CORS 问题的信息，但这应该不是问题，因为我使用 ionic 代理。

• 如果我连接 cordova-plugin-camera，我会返回一个 URL (file:///home/.../example.jpg)，我不知道如何将其连接到 FormData用于 POST 到后端:

    var updateUserPhoto = function (userId, photoURI) {
    if (!photoURI) {return}
    var fd = new FormData();
    fd.append('photo', photoURI);
    return $http.post(API_URL + "users/"+userId+"/photo/", fd, {
        transformRequest: angular.identity,
        headers: {AUTHORIZATION: "Token "+window.localStorage['apiToken'], 'CONTENT-TYPE': undefined}
        });
    };

我尝试在 fd 中附加一个对象，例如 {path: photoURI, name: 'blablabla'}在这个问题中，我最终遇到了 Django 错误:

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

我可能还没有那么远，所以我宁愿不使用外部片段。

Answer 1

我遇到了非常类似的问题，然后还有一些。这个Media plugin来自 Ionic 市场的解决方案通过提供 base64 数据和 uri 供我使用，解决了该问题。