如何将多个值添加到输入标签 - js

Question

我正在尝试捕获多张图像然后保存到数据库这里是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})

但它引发了这个错误：

not enough values to unpack (expected 2, got 1)

仅

和 print(img) returns : !当我删除 for 循环并添加此 format, imgstr = imgdata.split(';base64,') 时，它只保存最后一张图片！请问有什么方法可以实现它，将所有 base64 数据从 js 添加到输入标签，然后按其数据库 base64 属性拆分输入数据？提前致谢..

Answer 1

你的模板片段在哪里，我假设你没有在这里使用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')

然后 returns 图像列表，因此您可以将它们保存在 数据库

Answer 2

您需要创建 <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/

如何将多个值添加到输入标签 - js

how to add multiple values to an input tag - js

html

javascript

django

base64