我试图捕获多个图像，然后保存到数据库中，这里是js代码

下面是我的views.py获取多个数据并使用其属性对其进行拆分，下面是我的代码

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;})   

但会引发以下错误:

没有足够的值来解包（预期为2，得到为1)

并且只返回：！当我删除for循环并添加它时，它只保存最后一个图像！请问有什么方法可以实现它，将所有的base64数据从js添加到输入标签，然后按其数据base64属性拆分输入数据？ 提前感谢..

顺晟科技：

您的模板片段在哪里，我假设您在这里没有使用ajax，所以如果您有多个图像标记，您可以执行以下操作

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;})   

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

• 您需要创建，而不是

• 不是通过执行追加任何内容，而是覆盖旧值。

https://jsfiddle.net/c7ykg83h/