图片上传指令（AngularJS和Django Rest Framework）

Question

我需要一个图片上传指令，这是我的代码：

# 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 Framework 没有问题，但是如果我使用 AngularJS 发布运输模型会出现“错误请求”的错误。我需要上传图片并使用图片 URL 设置图片字段。谢谢。

- user3165329

---

您可能需要将此分为两个不同的API调用：一个用于模型，另一个用于文件上传。请参见：https://dev59.com/v2Ij5IYBdhLWcg3wPy4a - Alp

Answer 1

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

第一步：
当将文件输入绑定到angular模型时，请使用文件模型指令。我在几个项目中都使用下面这个指令，它可以满足我的需求。我是从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：
在处理 post 请求的控制器或服务中创建一个 formData 对象。首先初始化一个新的 formData 对象，然后循环遍历你的 Angular 对象，并将所有属性设置为该 formData 对象。

如果在控制器中完成，则可以像这样完成：
（我使用 lodash 的 _.each 循环，但你可以选择适合你的方法）

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

步骤 3：
使用Angular的 $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
});

- Erik Svedin

---

在第二步中，在您的 _.each() 循环中，您有一个名为 data 的数组。这是从哪里来的？当我尝试运行此循环时，它会报错说 data 未定义... - Vince

@Vince 这里的“data”将是原始对象。例如，在上面的示例中，模板将一个名为“transporter”的对象绑定到作用域中，“controller”中的“data”在这种情况下将指代“transporter”对象。 - Erik Svedin