如何将 JavaScript 对象插入 Django JSONField

Question

在我的 django web 应用程序中，我有两个页面 - 一个是用户填写名称、大小、图像并在图像上指定一些兴趣点的名称的表单。下一页显示该图像并允许用户在顶部放置一些与兴趣点相对应的 SVG 圆圈，当用户提交时，我想要第一页中的表单和用于圆圈位置的 JSONField（点兴趣）上的图像全部保存到一个模型中。

目前，我的解决方案是包含第一个表单的页面，然后将整个表单传递到下一页。因为我不想让用户再看到那个表单，所以我把它放在一个隐藏的 div 中。我从表单渲染图像并使用 JavaScript，在用户单击的位置绘制圆圈。当按下提交按钮时，它会在脚本中运行一个函数，该函数会再次提交表单，但会在提交前用所有圆圈的位置更新 JSONField。

在提交表单之前，下面的代码一直有效，但是当我进入 view2 函数时，form.is_valid() 总是返回 false。我怀疑问题出在这里：

document.getElementById("id_spots").innerHTML = 点

我认为既然 Django 表单字段是 JSONField，我可以将 innerHTML 指定为我在 JavaScript 中创建的点对象。如果我看一下这对 HTML 的影响，[object Object] 会插入到点文本区域框中。我也试过 JSON.stringify(spots) 但无济于事。

谁能发现问题？有没有更好的方法来分配 JSONFiled 的值以匹配 django 中的变量？

views.py

def view1(request):
    if request.method == 'POST':
        form = ImageForm(request.POST, request.FILES)
        if form.is_valid():
            b64Img = str(b64encode(form.files['img'].file.read()))[2:-1]
            return render(request, 'my-app/view2.html', { 'form': form, 'base': base, 'my_img': b64Img })
    else:
        form = ImageForm()
    return render(request, 'my-app/page1.html', { 'form':form, "base":base })

def view2(request):
    if request.method == 'POST':
        form = ImageForm(request.POST, request.FILES)
        if form.is_valid():
            form.save()
    else:
        form = DocumentsForm()
    return render(request, 'my-app/page1.html', {'form':form, 'base':base})

models.py

class MyImage(models.Model):
    name = models.CharField(max_length=50)
    width = models.CharField(max_length=10)
    height = models.CharField(max_length=10)
    spot_names = models.CharField(max_length=1000)
    img = models.ImageField(default=None, upload_to='media/')
    spots = JSONField(blank=True)
    

    def __str__(self):
        return self.name

forms.py

class ImageForm(ModelForm):
    class Meta:
        model = MyImage
        fields = '__all__'

html/js

{% extends 'main/base.html' %}

{% block content %}

<div class="my-div">

    <div>
        <h1>Draw Dots!</h1>
        <h3 id="spot-selection">Click Spot: </h3>
    </div>
    <form id="drawForm" enctype="multipart/form-data" method="POST" action="/my-app/view2/">
        {% csrf_token %}
        <div style="display: none;">
            {{ form }}
        </div>
        
        <svg id="svg">
            <image id="my-img" href="data:image/png;base64,{{ my_img }}"/>          
        </svg>

        <button typr="button" id="submit-img" style="width: 100px;">Submit</button>
    </form>

</div>

{% endblock %}


{% block script_content %}

const spotNames = "{{ form.spot_names.value }}".split(",")
const width = {{ form.width.value }}
const height = {{ form.height.value }}
var spots = {}

this.window.addEventListener('DOMContentLoaded', (event) => {
    const svgElem = document.getElementsByTagName("svg")

    if (svgElem != undefined && svgElem.length != 0) {
        const svg = svgElem[0]
        const image = svg.firstChild
        var i = 0
        document.getElementById("spot-selection").innerHTML = "Click Spot: " + spotNames[i]
        
        svg.onclick = function(event) {
            if (i < spotNames.length) {
                var newCircle = document.createElementNS('http://www.w3.org/2000/svg', 'circle')
                let m = mousePositionSVG(event)
                newCircle.setAttribute('cx', m.x)
                newCircle.setAttribute('cy', m.y)
                newCircle.setAttribute('r', '10')
                newCircle.setAttribute('fill', 'red')
                svg.append(newCircle)
                spots[spotNames[i]] = [width*(m.x / document.getElementById("my-img").getBoundingClientRect().width), height*(m.y / document.getElementById("my-img").getBoundingClientRect().height)]
                i++
                if (spotNames[i] != undefined){
                    document.getElementById("spot-selection").innerHTML = "Click Spot: " + spotNames[i]
                }else{
                    document.getElementById("spot-selection").innerHTML = "All Spots Clicked!"
                }
                
            }
        }
        document.addEventListener("keydown", function(event){
            if (event.key == "Backspace" && i > 0){
                const circles = document.querySelectorAll("circle")
                circles[circles.length - 1].remove()
                i--
                document.getElementById("spot-selection").innerHTML = "Click Spot: " + spotNames[i]
            }
        })

    }
    document.getElementById("submit-img").onclick = function() {
        if (document.getElementById("spot-selection").innerHTML == "All Spots Clicked!"){
            document.getElementById("id_spots").innerHTML = spots
            console.log({{ form.spots.value }})
            document.getElementById("spotForm").submit()
        }
    }
})

function mousePositionSVG(e) {
    let svg = document.querySelector('svg')
    var p = svg.createSVGPoint()
    p.x = e.clientX
    p.y = e.clientY
    var ctm = svg.getScreenCTM().inverse();
    var p =  p.matrixTransform(ctm);
    return p;
}

{% endblock %}

Answer 1

使用 JSON.stringify() 其实是正确的方法：

document.getElementById("id_spots").innerHTML = JSON.stringify(spots)

我认为这部分是错误，因为我在提交表单时遇到错误，并且表单中唯一更改的部分是 JSONField。实际上，错误似乎来自 ImageField。事实证明，如果你将一个表单作为上下文传递给另一个页面，ImageFields 将不会被保留。

我已就 ImageField 问题发表了更相关的帖子，因此任何新答案都应重定向到此帖子： How to pass image file from one page to another in multi-page form (Django)