Question

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

对于后端方面，我按照tutorial进行了操作。当我使用时：

public class LinkTransformationMethod implements TransformationMethod {

    @Override
    public CharSequence getTransformation(CharSequence source, View view) {
        if (view instanceof TextView) {
            TextView textView = (TextView) view;
            Linkify.addLinks(textView, Linkify.WEB_URLS);
            String stringText = textView.getText().toString();
            Spannable text = (Spannable) textView.getText();
            URLSpan[] spans = text.getSpans(0, textView.length(), URLSpan.class);
            for (int i = spans.length - 1; i >= 0; i--) {
                URLSpan oldSpan = spans[i];
                text.removeSpan(oldSpan);
                String url = oldSpan.getURL();
                int startIndex = stringText.indexOf(url);
                int lastIndex = startIndex + url.length();
                text.setSpan(new CustomTabsURLSpan(url), startIndex, lastIndex, Spanned.SPAN_EXCLUSIVE_EXCLUSIVE);
            }
            return text;
        }
        return source;
    }

    @Override
    public void onFocusChanged(View view, CharSequence sourceText, boolean focused, int direction, Rect previouslyFocusedRect) {

    }
}

这很好用，文件真的是创建的，之后我可以使用ng-src检索它。

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

在这里，我尝试了很多来自论坛或tutos的想法，例如one

我有两个不同的问题。

如果我复制最后一个tuto，我最终得到一个400 Bad Request： Erreur d'analyze XML：aucunélémenttrouvéImplacement：moz-nullprincipal：{1b4583fc ...}Numérodeligne 1，Colonne 1：我不知道它是来自后端还是mozilla。我读到了CORS问题，但这应该不是问题，因为我使用离子代理。
如果我使用cordova-plugin-camera连接，我有一个URL（文件：///home/.../example.jpg）返回，我不知道如何将它连接到FormData用于POST到后端：

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

我尝试在fd中附加一个对象，例如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} }); }; 在本期中，我最终得到了一个Django错误：

{path: photoURI, name: 'blablabla'}

我可能不是那么远，所以我宁愿不使用外部代码片段。

Answer 1

我有类似的问题，然后是一些问题。来自Ionic市场的这个Media plugin通过提供base64数据以及uri供我使用来解决了这个问题。

Answer 2

我终于解决了我的问题。 OUF！

我在后端使用了这个：

_app_session

在前端方面：

配置我的资源：

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

使用相机的这个选项（来自cordova插件）：

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
    }
};

PS：这个解决方案可能不是最好的。仍然希望找到一个更好的。但我现在继续这样做。

使用ionic，angular和django + restframework上传图像

2 个答案: