图像上传指令（angularJs和django rest框架）

我需要一个图像上传指令，下面是我的代码：

# 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发布transporter模型，则会出现错误的请求。我需要上传图像，并设置图像与图像URL的图像字段。谢谢

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

步骤1:
将文件输入绑定到角度模型时，请使用文件模型指令。我在几个项目中使用下面的一个，这对我来说很有用。我从詹妮·卢森那里得到的

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">

第三步：
使用angulars$http将formData对象发布到url端点，并根据需要处理成功请求

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

---

您可能需要将其分为两个不同的api调用：一个用于模型，另一个用于文件上传。另请参见：在步骤2下的

.each（）

循环中，您有一个名为

数据的数组。这是从哪里来的？当我尝试这个循环时，我得到一个错误，说
数据
未定义…@Vince这里的“数据”将是原始对象。例如，在上面的示例中，模板将对象“transporter”绑定到作用域，在这种情况下，控制器中的“数据”将引用“transporter”对象。
$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
});