图片上传指令（angularJs和Django的休息框架） [英] Image upload directive (angularJs and django rest framework)

问题描述

我需要一个图片上传指令，这里是我的code的样子：

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框架，但我得到错误的请求错误，如果我发布与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

推荐答案

我将分享使用角度和DRF我的文件上传体验。

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

第1步：结果
您的文件输入绑定到一个角的模型时，使用一个文件模型指令。使用im一下面其中的伎俩，我的几个项目。我是从此博文由珍妮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">

第二步：结果
创建您的控制器或服务，处理后一个FORMDATA对象。这可以通过先启动一个新的FORMDATA对象来完成。然后通过你的角度对象循环及其所有​​属性设置到该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.

如果在这个控制器可以这样所做的一切：结果
（我使用lodash为_.each循环，但只要适合你去）

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对象张贴到您的网址端点和处理的成功请求，请你！

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的休息框架）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！