Как загрузить изображение из Angular в Django (Rest Framework) в рамках вложенной модели? - PullRequest
Новая
       20

Как загрузить изображение из Angular в Django (Rest Framework) в рамках вложенной модели?

0 голосов
/ 18 мая 2019

введите описание изображения здесь > Я относительно новичок в Django .. Я пытаюсь загрузить изображения в модель

(один ко многим) из Angular Front-Конец.Я пробовал несколько разных попыток, но по какой-то причине в ответ возвращается пустое изображение.Я получаю ответ об успешном выполнении, но изображение не сохраняется, скорее его значение равно {}.

У меня есть модель, для которой пользователь может загрузить одно или несколько изображений.Поэтому я создал отдельный класс Image и установил отношение «один ко многим» между моей основной моделью и классом изображения.Поскольку я имею дело с вложенным классом сериализатора, мне пришлось создать собственный метод 'create' для POST-ввода новой записи.

Я создал ViewSet для класса изображения и POST-редактировал изображение там,добавление записи модели изображения напрямую.Это работало нормально.Но получение {} для POST-запроса вложенного объекта, для которого поля являются экземпляром изображения.

Класс изображения Djano 

class MetalComponentImage(models.Model):
prong = models.ForeignKey(Prong, related_name='images', on_delete=models.CASCADE, null=True)
image = models.ImageField(upload_to='component-images', null=True, blank=True)
isMain = models.BooleanField()

Вложенный объект Djano 

class Prong(MetalComponent):
metalComponentType = models.CharField(max_length=30, choices=MetalComponentTypeChoices.choices(), null=True)

Typescript Вложенные объекты и классы изображений 

export class MetalComponent{
metalComponentType : ComponentType;
id: number;
images?: MetalComponentImage[] = [];}

  export class MetalComponentImage{
image: string;
isMain : boolean;
id: number;}

Угловой служебный файл для добавления нового вложенного объекта или только нового изображения. 

getAuthenticationHeaders() {
    const token = localStorage.getItem('token');
    const httpHeaders = new HttpHeaders(
      {
        'Authorization': 'Token ' + token
      }
    );
    return { headers: httpHeaders };
  }



addNewProng(prong : Prong): Observable<any> {
    return this.http.post(this.baseUrl + 'library/components/prong/add_prong/', prong, this.getAuthenticationHeaders());
  }

addProngImage(prongImage){
console.log("prong image = ", prongImage);
let fd = new FormData();
fd.append('image', prongImage.image, prongImage.name);
fd.append('isMain', "true");
    return this.http.post(this.baseUrl + 'library/components/metalComponentImage/', fd, this.getAuthenticationHeaders());
  }

Сериализаторы 

class MetalComponentImageSerializer(serializers.ModelSerializer):
class Meta:
    model = MetalComponentImage
    fields = ['id', 'image', 'isMain']

class ProngSerializer(serializers.ModelSerializer):
images = MetalComponentImageSerializer(many=True)
class Meta:
    model = Prong
class ProngReadSerializer(ProngSerializer):
gemstoneShape = GemstoneShapeSerializer(many=False, read_only=True)

ViewSets 

class MetalComponentImageViewSet(viewsets.ModelViewSet):
serializer_class = MetalComponentImageSerializer
queryset = MetalComponentImage.objects.all()
authentication_classes = (TokenAuthentication,)

class ProngViewSet(viewsets.ModelViewSet):
queryset = Prong.objects.all()
authentication_classes = (TokenAuthentication,)

def get_serializer_class(self):
    if self.request.method == 'GET':
        return ProngReadSerializer
    return ProngSerializer

@action(detail=False, methods=['POST'])
def add_prong(self, request, pk=None):
    print(request.data)
    if request.data:

        name = request.data['name']
        hasMould = request.data['hasMould']
        images_data = request.data['images']
        prongCount = request.data['prongCount']
        idealDepth = request.data['idealDepth']
        idealWidth = request.data['idealWidth']
        idealLength = request.data['idealLength']
        approximateGemstoneUnitWeight = request.data['approximateGemstoneUnitWeight']
        prongHeight = request.data['prongHeight']
        averageWeight = request.data['averageWeight']

        prong = Prong.objects.create(averageWeight=averageWeight, prongHeight=prongHeight, name=name,
                                     approximateGemstoneUnitWeight=approximateGemstoneUnitWeight,
                                     hasMould = hasMould, prongCount=prongCount, idealDepth=idealDepth,
                                     idealLength=idealLength, idealWidth=idealWidth)
        for image_data in images_data:
            image = MetalComponentImage.objects.create(prong=prong, isMain= image_data['isMain'], image=image_data['image'])
            prong.images.add(image)
        prongSerializer = ProngSerializer(prong, many=False)
        response = {'message': 'new prong added', 'result': prongSerializer.data}
        return Response(response, status=status.HTTP_200_OK)
    else:
        response = {'message': 'you need to provide prong data'}
        return Response(response, status=status.HTTP_400_BAD_REQUEST)

"addProngImage ()"успешно публикует новое изображение, но при публикации вложенного объекта "addNewProng ()" значение поля изображений равно {} на Django-конце.Связано ли это с типом содержимого в заголовках?

...