图片上传指令(angularJs 和 django rest 框架) [英] Image upload directive (angularJs and django rest framework)

问题描述

我需要一个图片上传指令，我的代码如下所示:

I need an image upload directive, here is how my code looks like:

# Model
class transporter(models.Model):
    company_name = models.CharField(max_length=100)
    address = models.CharField(max_length=100)
    image = models.FileField(upload_to=upload_path,blank=True, null=True)

    def upload_path(self, filename):
        return 'photos/%s/%s' % (self.company_name, filename)


# Serializer
class transporterSerializer (serializers.HyperlinkedModelSerializer):
    username = serializers.Field(source='username.username')

    class Meta:
        model = transporter
        fields = ('id','company_name','address','image')

它仅适用于 django rest 框架，但如果我使用 angularjs 发布传输器模型，我会收到错误请求错误.我需要上传图像并使用图像 URL 设置图像字段.谢谢

it works with only django rest framework but i get Bad request error if I post the transporter model with angularjs. I need to upload the image and set the image field with the image URL. thank you

推荐答案

我将分享我使用 angular 和 drf 上传文件的经验.

I'll share my experience with file upload using angular and drf.

第 1 步:
将文件输入绑定到角度模型时，请使用文件模型指令.我在几个项目中使用了下面的一个，这对我有用.我从 Jenny Louthan 的这篇博文中得到它.

angular.module('appName').directive('fileModel', ['$parse', function ($parse) {
return {
    restrict: 'A',
    link: function(scope, element, attrs) {
        var model = $parse(attrs.fileModel);
        var modelSetter = model.assign;

        element.bind('change', function(){
            scope.$apply(function(){
                modelSetter(scope, element[0].files[0]);
            });
        });
    }
};
}]);

用于文件输入:

<form enctype="multipart/form-data">
    ...
    <input type="file" class="form-control" file-model="transporter.image">

第 2 步:
在处理帖子的控制器或服务中创建一个 formData 对象.这可以通过首先启动一个新的 formData 对象来完成.然后循环遍历您的 angular 对象并将其所有属性设置为该 formData 对象.

Step 2:
Create a formData object in your controller or service which handles the post. This is can be done by first initiating a new formData object. Then looping through your angular object and setting all its attributes to that formData object.

如果在控制器中完成，可以这样完成:
(我在 _.each 循环中使用 lodash，但请选择适合您的任何东西)

If done in the controller this can be done like this:
(I'm using lodash for the _.each loop, but go with whatever suits you)

var fd = new FormData();
_.each($scope.transporter, function (val, key) {
    fd.append(key, data[key]);
});

第 3 步:
使用 angulars $http 将 formData 对象发布到您的 url 端点并根据需要处理成功请求！

Step 3:
Use angulars $http to post formData object to your url endpoint and handle the success request as you please!

$http({
    method: 'POST',
    url: '/api/url/to/endpoint',
    data: fd,
    transformRequest: angular.identity,
    headers: {
        'Content-Type': undefined
    }
}).success(function (response) {
    // Do stuff with you response
});

这篇关于图片上传指令(angularJs 和 django rest 框架)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！