Как добавить несколько значений в тег ввода - js

я пытаюсь захватить несколько изображений и затем сохранить в базе данных вот код js

const player = document.getElementById('player')
const canvas = document.getElementById('canvas')
const form = document.getElementById('form')
const docs = document.getElementById('documents')
const captureButton = document.getElementById('capture')
const context = canvas.getContext('2d')
      
captureButton.addEventListener('click', (e) => {
    context.drawImage(player, 0, 0, canvas.width, canvas.height)
    e.preventDefault();
    let new_image = document.createElement('img')
    new_image.src = canvas.toDataURL()
    console.log(new_image)
    docs.value = canvas.toDataURL()
    form.insertAdjacentElement('beforeend',new_image)
    e.preventDefault();
  });
    
navigator.mediaDevices.getUserMedia({video: true})
   .then((stream) => { player.srcObject = stream;})   
 <form id="form" action="" method="POST" enctype="multipart/form-data">{% csrf_token %}
                <video id="player" controls autoplay></video>
                <button type="button" id="capture">Capture</button>
                <button>save</button>
                <canvas id="canvas" width=320 height=240></canvas>
                <input type="text" name="documents" hidden id="documents">
</form>

и вот мой views.py для получения нескольких данных base64 и разделения их с помощью атрибута data, вот мой код

@login_required
def add_new_image(request,id):
    obj = get_object_or_404(Booking,id=id)
    if request.method == 'POST':
        images = request.POST.get('documents')
        data,imgdata = images.split('data')
        for img in imgdata:     
            print(img)       
            format, imgstr = img.split(';base64,') 
            ext = format.split('/')[-1] 
            data = ContentFile(base64.b64decode(imgstr), name='temp.' + ext)
            photo = Document.objects.create(
                booking = obj,
                docs = data                
            )
            photo.save()
        return redirect(reverse_lazy("booking:add_booking",kwargs={"room_no":obj.room_no.room_no}))
    else:
        messages.error(request,_('choose or capture right image ..'))
    return render(request,'booking/add_img.html',{'obj':obj})

но он выдает эту ошибку :

недостаточно значений для распаковки (ожидалось 2, получено 1)

а print(img) возвращает только : ! и когда я удаляю цикл for и добавляю этот format, imgstr = imgdata.split(';base64,') он сохраняет только последнее изображение ! пожалуйста, есть ли способ достичь этого, добавить все данные base64 из js в тег input и затем разделить входные данные по их атрибуту data base64 ? заранее спасибо ..

Где находится ваш шаблон снип, я предполагаю, что вы не используете ajax здесь, так что если у вас несколько тегов изображений, вы должны сделать что-то вроде этого

<img src='image01' name=image' class =" something"/>
<img src='image02' name=image' class =" something"/>
<img src='image03' name=image' class =" something"/>

images = request.FILES.getlist('image')

возвращает список изображений и, следовательно, вы можете сохранить их в вашей базе данных

  • Вам нужно создать <input>, а не <image>

  • Вы ничего не добавляете, делая docs.value = canvas.toDataURL(), просто перезаписываете старые значения.

const player = document.getElementById('player')
const canvas = document.getElementById('canvas')
const form = document.getElementById('form')
const captureButton = document.getElementById('capture')
const context = canvas.getContext('2d')

captureButton.addEventListener('click', (e) => {
  context.drawImage(player, 0, 0, canvas.width, canvas.height)
  let new_data = document.createElement('input') // <== use <input>
  new_data.setAttribute('name','document')
  new_data.value = canvas.toDataURL()
  form.insertAdjacentElement('beforeend',new_data)
});

navigator.mediaDevices.getUserMedia({video: true})
  .then((stream) => { player.srcObject = stream;})
form *{max-width:20vw;}
img{display:inline-block;}
canvas{display:none;}
<form id="form" action="" method="POST" enctype="multipart/form-data">
  <video id="player" controls autoplay></video>
  <button type="button" id="capture">Capture</button>
  <button>save</button>
  <canvas id="canvas" width=320 height=240></canvas>
</form>

https://jsfiddle.net/c7ykg83h/

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