私はDjango RESTとAngular on frontendで簡単なアプリを持っており、画像のアップロードに問題があります。
私のモデル:Django REST、アップロードされた画像にnull値があります
class Photo(models.Model):
img = models.ImageField(upload_to='photos/', max_length=254)
text = models.CharField(max_length=254, blank=True)
私は、フォームを介して画像を送信して、テキストがうまくアップロードされますが、画像はnull値を持ちます。ブラウザから
responce:
{ "IMG":NULL、 "テキスト": "テスト"}:
のQueryDict Iが画像をアップロードする際
ここは
self.data.request
印刷されます。 {'text':['test']、 'InMemoryUploadedFile:filename.jpg(image/jpeg)]}
シリアライザはちょうどsimですple ModelSerializer
に2つのモデルフィールドがあります。
ビュー:
class PhotoViewSet(viewsets.ModelViewSet):
queryset = Photo.objects.all()
serializer_class = PhotoSerializer
parser_classes = (MultiPartParser, FormParser)
def perform_create(self, serializer):
serializer.save(img=self.request.data.get('file'))
photo_router = DefaultRouter()
photo_router.register(r'photo', PhotoViewSet)
私はng-file-upload libに使用した画像のアップロードのためには、私がアップロードする別の方法を試してみましたが、イメージがあまりにもヌルでした。
角度コード:
var app = angular.module('myApp', ['ngRoute', 'ngFileUpload']);
app.config(function ($routeProvider) {
$routeProvider
.when('/', {
templateUrl: 'http://127.0.0.1:8000/static/js/angular/templates/home.html'
})
});
app.config(['$httpProvider', function($httpProvider) {
$httpProvider.defaults.xsrfCookieName = 'csrftoken';
$httpProvider.defaults.xsrfHeaderName = 'X-CSRFToken';
}]);
app.controller('MyCtrl', ['$scope', 'Upload', '$timeout', function($scope, Upload, $timeout) {
$scope.uploadPic = function(file) {
file.upload = Upload.upload({
url: '/api/photo/',
data: {text: $scope.text, img: file},
});
file.upload.then(function (response) {
$timeout(function() {
file.result = response.data;
});
}, function (response) {
if (response.status > 0)
$scope.errorMsg = response.status + ': ' + response.data;
}, function (evt) {
file.progress = Math.min(100, parseInt(100.0 * evt.loaded/evt.total));
});
}
}]);
Greate、ありがとうございます! –