JS如何向input标签存入多值 实现多张拍摄图片base64提交后端存储

问题根因 #

1. 前端逻辑错误：每次点击拍摄按钮时直接覆盖了隐藏input的value值，导致提交时只有最后一张图片的base64数据
2. 后端解析逻辑错误：采用split('data')拆分base64的方式不符合多张图片的解析规则，遍历拆分后的字符串会直接循环单个字符，才会出现print(img)仅返回单个符号、拆分失败的报错。

修复方案 #

1. 调整前端JS代码 #

修改拍摄按钮的点击事件逻辑，用不会出现在base64编码中的|作为分隔符，每次拍摄后将新图片的base64追加到input值中：

captureButton.addEventListener('click', (e) => {
    context.drawImage(player, 0, 0, canvas.width, canvas.height)
    e.preventDefault();
    let new_image = document.createElement('img')
    const currentBase64 = canvas.toDataURL()
    new_image.src = currentBase64
    // 追加base64而非覆盖
    if(docs.value){
        docs.value += `|${currentBase64}`
    }else{
        docs.value = currentBase64
    }
    form.insertAdjacentElement('beforeend',new_image)
});

2. 调整后端Django解析逻辑 #

先按分隔符|拆分出所有单张图片的base64字符串，再逐张解析存储即可：

@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', '')
        if not images:
            messages.error(request,_('未拍摄任何图片，请先拍摄后提交'))
            return render(request,'booking/add_img.html',{'obj':obj})
        # 按分隔符拆分所有图片base64
        img_list = images.split('|')
        for img_base64 in img_list:
            # 跳过空值
            if not img_base64:
                continue
            format, imgstr = img_base64.split(';base64,') 
            ext = format.split('/')[-1] 
            data = ContentFile(base64.b64decode(imgstr), name='temp.' + ext)
            # create方法会自动保存，无需额外调用save()
            Document.objects.create(
                booking = obj,
                docs = data                
            )
        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})

内容的提问来源于stack exchange，提问作者artiest