django - Django Rest 多张图片上传到 React-Native

问题描述

已经三天了，我无法上传图片。查看了互联网上所有可能的帖子，但找不到解决方案。如果有人帮助我，我将不胜感激。我真的被困住了。

我在下面的多对多关系字段中遇到错误，并且无法上传任何图像。

KeyError：“兴奋剂”和“照片”

这是我的模型

def upload_location(instance, filename):
    return '/images/%s-%s' % (str(datetime.now()),instance.file)


class Picture(models.Model):
    file = models.ImageField(upload_to=upload_location)
    slug = models.SlugField(max_length=50, blank=True)

    def __str__(self):
        return self.file.name

    def save(self, *args, **kwargs):
        self.slug = self.file.name
        super(Picture, self).save(*args, **kwargs)

    def delete(self, *args, **kwargs):
        self.file.delete(True)
        super(Picture, self).delete(*args, **kwargs)

class Dopings(models.Model):
    name = models.CharField(verbose_name="Doping Name",max_length=225)

    def __str__(self):
        return self.name


class ListingDopings(models.Model):
    doping = models.ForeignKey(Dopings,on_delete=models.SET_NULL, verbose_name="Doping", null=True, blank=True)
    expire_date = models.DateField()



class Listings(models.Model):
    user = models.ForeignKey(User, on_delete=models.SET_NULL, related_name='listing_user', null=True, blank=True)
    categoryName = models.ForeignKey(GameCategories,on_delete=models.SET_NULL, verbose_name="Category Name", null=True, blank=True)
    currency = models.ForeignKey(Currency,on_delete=models.SET_NULL, verbose_name="Currency", null=True, blank=True)
    price = models.IntegerField(default=0)
    date = models.DateField(auto_now=True)
    title = models.CharField(verbose_name="Title",max_length=225, null=True,blank=True)
    description = models.TextField(null=True,blank=True)
    slug = models.SlugField(max_length=555, blank=True)
    photos = models.ManyToManyField(Picture,blank=True)
    isActive = models.BooleanField(default=False)
    dopings = models.ManyToManyField(ListingDopings, blank=True)


    def __str__(self):
        return self.title

我的序列化器

class ListingSerializer(serializers.ModelSerializer):
    photos = PictureSerializer(many=True, required=False, allow_null=True)
    dopings = DopingSerializer(many=True, required=False, allow_null=True)

    class Meta:
        model = Listings
        fields = (
        'id', 'categoryName', 'currency', 'price', 'date', 'title', 'description', 'slug', 'photos', 'isActive',
        'dopings')

    def create(self, validated_data):
        print('Data', validated_data)
        dopings_data = validated_data.pop('dopings')
        photo_data = validated_data.pop('photos')
        instance = Listings.objects.create(**validated_data)
        for photo in photo_data:
            picturesObject = Picture.objects.create(listings=instance, **photo)
            instance.photos.add(picturesObject)
        for doping in dopings_data:
            dopingObject = Dopings.objects.create(listings=instance, **doping)
            instance.dopings.add(dopingObject)
        return instance

我的观点

class ListingsCreateApiView(mixins.CreateModelMixin,generics.ListAPIView):
    serializer_class = ListingSerializer
    authentication_classes = [TokenAuthentication]
    parser_classes = (MultiPartParser, FormParser,FileUploadParser)


    def get_queryset(self):
        qs = Listings.objects.all().filter(isActive=True)
        return qs

    def post(self,request,*args,**kwargs):
        return self.create(request,*args,**kwargs)

    def perform_create(self,serializer):
        my_token = self.request.META.get('HTTP_AUTHORIZATION').split()[1]
        user_id = Token.objects.get(key=my_token).user_id
        userObject = get_object_or_404(User, id=user_id)
        serializer.save(user=userObject)

和我的 React-native 上传

const createFormData = (photo, body) => {
        const data = new FormData();
      
        data.append("photos", {
          uri : photo.path,
          name: photo.name,
          type: photo.mime,
        });
        
        
        Object.keys(body).forEach(key => {
          data.append(key, body[key]);
        });
        
        return data;
      };

const uploadImage = async (imagePath) => {
        const res = await uploadPhotos({
            method: 'POST',
            body: createFormData(imagePath, { "title":title ,"categoryName":gameId,"currency":currencyId,price:price,description:details,"isActive":0, "dopings" : {id:1} })
        
        }, ADD_LISTING);
   };

标签： djangoreactjsreact-nativefile-uploaddjango-rest-framework

django - Django Rest 多张图片上传到 React-Native

问题描述

解决方案

推荐阅读