图片上传指令（angularJs和Django的REST框架）

我需要一个图片上传指令，这里是我的代码看起来像：图片上传指令（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发布转运模型。我需要上传图片并使用图片网址设置图片字段。谢谢

来源

2014-02-16 user3165329

您可能需要将其分成两个不同的API调用：一个用于模型，另一个用于文件上传。另请参见：http://stackoverflow.com/questions/20473572/django-rest-framework-file-upload – Alp

我会用angular和drf来分享我的文件上传经验。

第1步：
您的文件输入绑定到角模型时使用文件模式指令。我在几个项目中使用下面的一个，这对我来说很有用。我是从Jenny Louthan的this blogpost得到的。

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对象来完成。然后遍历您的角度对象并将其所有属性设置为该formData对象。

如果控制器这可以这样所做的一切：

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

第3步（我使用lodash为_.each循环，但只要适合你去）：
使用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 
});

来源

2015-03-12 20:03:36

在步骤2中，在'_.each（）'循环中，您有一个名为'data'的数组。这个是从哪里来的？当我尝试这个循环时，我得到一个错误，说'数据'是未定义的... – Vince

@Vince这里的“数据”将是原始对象。例如，在上面的例子中，模板将一个对象“transporter”绑定到范围，控制器中的“data”在这种情况下就是指“transporter”对象。 –

图片上传指令（angularJs和Django的REST框架）

回答

相关问题