图像上传指令(angularJs和django休息框架) [英] Image upload directive (angularJs and django rest framework)
问题描述
我需要一个图像上传指令,这里是我的代码如何:
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:
将文件输入绑定到角度模型时,使用文件模型指令。我使用下面的几个项目,为我做的伎俩。我从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:
创建一个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.
如果在控制器中完成,可以这样做:
(我在_.each循环中使用lodash,但是任何适合你)
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对象发布到您的url端点,并按照您的要求处理成功请求!
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屋!