圖片上傳指令（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框架）

回答

相關問題