Развертывание нескольких изображений в Django-rest-framework с помощью React js

Здравствуйте, я пытаюсь загрузить несколько изображений в django rest framework, используя react js.. Однако, я пробовал только с одной картинкой и все получилось, но не с несколькими. Я действительно не знаю, что за поля для этого.

вот мой model.py

class Notes(models.Model):
   title = models.CharField(max_length=50)
   desc = models.TextField()
   time=models.TimeField(auto_now=True)
   img = models.ImageField(upload_to='img',null=True)   #here I want multiple img src 
   user = models.ForeignKey(User, on_delete=models.CASCADE , related_name='notes')

    def __str__(self):
        return self.title

Serializer.py

class NoteSerializer(serializers.ModelSerializer):
    class Meta:
        model = Notes
        fields = ['id','title','desc','img','time']

views.py

class getNotes(ModelViewSet):
    authentication_classes = [BasicAuthentication ,TokenAuthentication]
    permission_classes = [checkPermission]
    parser_classes = (MultiPartParser, FormParser)
    queryset = Notes.objects.all()
    serializer_class = NoteSerializer

    def list(self, request , **kwa):
       notes = Notes.objects.filter(user=request.user.id)
       serialzer = NoteSerializer(notes, many=True)
       return Response(serialzer.data)

   def create(self, request, **kwargs):
       notes = NoteSerializer(data=request.data)
       if notes.is_valid():
           print(request.user)
           notes.save(user=request.user)
           return Response(notes.data)
       else:
           return Response(notes.errors)

Что мне делать для получения нескольких img и сохранения их всех...

---

Фронтальная часть

функция для отправки img с помощью fetch api

let uploadPicture = (e)=>{
    console.log(e.target.files);
    // setImg(e.target.files);
    let img=[];
    let fd = new FormData()
    for (var index = 0; index < e.target.files.length; index++) {
        console.log(e.target.files[index]);
        img.push(e.target.files[index])
    }
    fd.append('pic',e.target.files[0])
    console.log("Fd ",fd.get('pic'));
    setImg(fd.get('pic'))
    console.log("Cimg ",Cimg);
    
}

Это тег ввода

   <div className="mb-3">
       <label htmlFor="img" className="form-label">Picture</label>
       <input type="file" multiple className="form-control"  placeholder='Enter your img...' onChange={uploadPicture}  id="img" name="img" /> 
   </div>

однако если я печатаю Cimg (состояние для imgs), то получаю пустое место, но я проверил в сети тогда это выглядит как [объект Filelist]. Так это правильно? Для отправки imgs. Или есть какой-нибудь способ сделать это?

Помогите мне... Я действительно застрял в этой загрузке нескольких img....

Вернуться на верх