Django request.FILE 返回无

Question

My html template
<form method="post" action="" enctype="multipart/form-data" class="form-group">
    {% csrf_token %}

<h1 class="m-3 text-center">New Post</h1>

<div id="tui-image-editor-container" style="min-height:750px;"></div>
<!--<input type="file" name="name" value="" />-->
<div class="row m-2">
    <input type="datetime-local" class="form-control-lg col m-2" name="date" default="" />
    <input type="text" class="form-control-lg col m-2" name="location" placeholder="Where are You ?" />
</div>
<div class="row m-2">
    <input type="text" class="form-control col m-2" name="hashtags" placeholder="Hashtags" />
    <input type="text" class="form-control col m-2" name="tags" placeholder="Tag Your Friends" />
</div>

<div class="row m-4">
    <input type="submit" class="btn btn-primary btn-lg col" id="abc" value="Create">
</div>

Javascript 文件

document.querySelector(".tui-image-editor-load-btn").setAttribute("name", "PostedImage")

views.py

def newpost_view(request,email,*args,**kwargs):
    if request.method == 'POST':
        newpost = {
            'date':request.POST['date'],
            'location':request.POST['location'],
            'hashtags':[f['value'] for f in json.loads(request.POST['tags'])],
            'tags':[f['value'] for f in json.loads(request.POST['hashtags'])]
            }
        print(newpost)
        print(request.FILES.get('PostedImage'))
    id = email[0:5]
    variables={'id':id}
    return render(request,'newpost.html',variables)

我想从输入中获取图像。元素本身是通过 javascript 添加的，因为我使用的是 Vanilla 图像处理 sn-p 它渲染得很好，我的浏览器显示带有添加为 "PostedImage" 的名称标签的元素。但它显示为错误，因为request.FILE['PostedImage'] 显示为空。是我无法在页面加载后添加元素，还是在 django 没有读取它们之后无法添加名称标签？我无法使用表单执行此操作，因为表单无法利用现有输入字段，而是添加它自己的。感谢您对此的任何帮助。我已经阅读过有关此类问题的先前主题：

1. 我的表单添加了enctype 标签
2. 我的提交按钮有type='Submit

我的表单在浏览器中呈现后： 前 30 行：

<form method="post" action="" enctype="multipart/form-data" class="form-group">
        <input type="hidden" name="csrfmiddlewaretoken" value="p9fvVLz33sM0Ok6OUzQcHPKgUVksAlSwjZQ6y7bBCURWdWdWd0wQuH84ULUPsWIn">
        <h1 class="m-3 text-center">New Post</h1>

        <div id="tui-image-editor-container" style="min-height: 750px; width: 100%; height: 100%;" class="tui-image-editor-container bottom">
            <ul class="tui-image-editor-help-menu top"><li tooltip-content="ZoomIn" class="tie-btn-zoomIn tui-image-editor-item help enabled"><svg class="svg_ic-menu"><use xlink:href="#ic-zoom-in" class="normal use-default"></use><use xlink:href="#ic-zoom-in" class="disabled use-default"></use><use xlink:href="#ic-zoom-in" class="hover use-default"></use></svg></li><li tooltip-content="ZoomOut" class="tie-btn-zoomOut tui-image-editor-item help enabled"><svg class="svg_ic-menu"><use xlink:href="#ic-zoom-out" class="normal use-default"></use><use xlink:href="#ic-zoom-out" class="disabled use-default"></use><use xlink:href="#ic-zoom-out" class="hover use-default"></use></svg></li><li tooltip-content="Hand" class="tie-btn-hand tui-image-editor-item help enabled"><svg class="svg_ic-menu"><use xlink:href="#ic-hand" class="normal use-default"></use><use xlink:href="#ic-hand" class="disabled use-default"></use><use xlink:href="#ic-hand" class="hover use-default"></use></svg></li><li class="tui-image-editor-item"><div class="tui-image-editor-icpartition"></div></li><li tooltip-content="History" class="tie-btn-history tui-image-editor-item help enabled"><svg class="svg_ic-menu"><use xlink:href="#ic-history" class="normal use-default"></use><use xlink:href="#ic-history" class="disabled use-default"></use><use xlink:href="#ic-history" class="hover use-default"></use></svg><div class="tie-panel-history"><ol class="history-list"></ol></div></li><li tooltip-content="Undo" class="tie-btn-undo tui-image-editor-item help"><svg class="svg_ic-menu"><use xlink:href="#ic-undo" class="normal use-default"></use><use xlink:href="#ic-undo" class="disabled use-default"></use><use xlink:href="#ic-undo" class="hover use-default"></use></svg></li><li tooltip-content="Redo" class="tie-btn-redo tui-image-editor-item help"><svg class="svg_ic-menu"><use xlink:href="#ic-redo" class="normal use-default"></use><use xlink:href="#ic-redo" class="disabled use-default"></use><use xlink:href="#ic-redo" class="hover use-default"></use></svg></li><li tooltip-content="Reset" class="tie-btn-reset tui-image-editor-item help"><svg class="svg_ic-menu"><use xlink:href="#ic-reset" class="normal use-default"></use><use xlink:href="#ic-reset" class="disabled use-default"></use><use xlink:href="#ic-reset" class="hover use-default"></use></svg></li><li class="tui-image-editor-item"><div class="tui-image-editor-icpartition"></div></li><li tooltip-content="Delete" class="tie-btn-delete tui-image-editor-item help"><svg class="svg_ic-menu"><use xlink:href="#ic-delete" class="normal use-default"></use><use xlink:href="#ic-delete" class="disabled use-default"></use><use xlink:href="#ic-delete" class="hover use-default"></use></svg></li><li tooltip-content="DeleteAll" class="tie-btn-deleteAll tui-image-editor-item help"><svg class="svg_ic-menu"><use xlink:href="#ic-delete-all" class="normal use-default"></use><use xlink:href="#ic-delete-all" class="disabled use-default"></use><use xlink:href="#ic-delete-all" class="hover use-default"></use></svg></li></ul>
            <div class="tui-image-editor-controls">
                <div class="tui-image-editor-controls-logo">
                    <img src="https://uicdn.toast.com/toastui/img/tui-image-editor-bi.png">
                </div>
                <ul class="tui-image-editor-menu"><li tooltip-content="Resize" class="tie-btn-resize tui-image-editor-item normal"><svg class="svg_ic-menu"><use xlink:href="#ic-resize" class="normal use-default"></use><use xlink:href="#ic-resize" class="active use-default"></use><use xlink:href="#ic-resize" class="hover use-default"></use></svg></li><li tooltip-content="Crop" class="tie-btn-crop tui-image-editor-item normal"><svg class="svg_ic-menu"><use xlink:href="#ic-crop" class="normal use-default"></use><use xlink:href="#ic-crop" class="active use-default"></use><use xlink:href="#ic-crop" class="hover use-default"></use></svg></li><li tooltip-content="Flip" class="tie-btn-flip tui-image-editor-item normal"><svg class="svg_ic-menu"><use xlink:href="#ic-flip" class="normal use-default"></use><use xlink:href="#ic-flip" class="active use-default"></use><use xlink:href="#ic-flip" class="hover use-default"></use></svg></li><li tooltip-content="Rotate" class="tie-btn-rotate tui-image-editor-item normal"><svg class="svg_ic-menu"><use xlink:href="#ic-rotate" class="normal use-default"></use><use xlink:href="#ic-rotate" class="active use-default"></use><use xlink:href="#ic-rotate" class="hover use-default"></use></svg></li><li tooltip-content="Draw" class="tie-btn-draw tui-image-editor-item normal"><svg class="svg_ic-menu"><use xlink:href="#ic-draw" class="normal use-default"></use><use xlink:href="#ic-draw" class="active use-default"></use><use xlink:href="#ic-draw" class="hover use-default"></use></svg></li><li tooltip-content="Shape" class="tie-btn-shape tui-image-editor-item normal"><svg class="svg_ic-menu"><use xlink:href="#ic-shape" class="normal use-default"></use><use xlink:href="#ic-shape" class="active use-default"></use><use xlink:href="#ic-shape" class="hover use-default"></use></svg></li><li tooltip-content="Icon" class="tie-btn-icon tui-image-editor-item normal"><svg class="svg_ic-menu"><use xlink:href="#ic-icon" class="normal use-default"></use><use xlink:href="#ic-icon" class="active use-default"></use><use xlink:href="#ic-icon" class="hover use-default"></use></svg></li><li tooltip-content="Text" class="tie-btn-text tui-image-editor-item normal"><svg class="svg_ic-menu"><use xlink:href="#ic-text" class="normal use-default"></use><use xlink:href="#ic-text" class="active use-default"></use><use xlink:href="#ic-text" class="hover use-default"></use></svg></li><li tooltip-content="Mask" class="tie-btn-mask tui-image-editor-item normal"><svg class="svg_ic-menu"><use xlink:href="#ic-mask" class="normal use-default"></use><use xlink:href="#ic-mask" class="active use-default"></use><use xlink:href="#ic-mask" class="hover use-default"></use></svg></li><li tooltip-content="Filter" class="tie-btn-filter tui-image-editor-item normal"><svg class="svg_ic-menu"><use xlink:href="#ic-filter" class="normal use-default"></use><use xlink:href="#ic-filter" class="active use-default"></use><use xlink:href="#ic-filter" class="hover use-default"></use></svg></li></ul>

                <div class="tui-image-editor-controls-buttons">
                    <div style="background-color: #fff;border: 1px solid #ddd;color: #222;font-family: 'Noto Sans', sans-serif;font-size: 12px">
                        Load
                        <input type="file" class="tui-image-editor-load-btn" name="PostedImage">
                    </div>
                    <button class="tui-image-editor-download-btn" style="background-color: #fdba3b;border: 1px solid #fdba3b;color: #fff;font-family: 'Noto Sans', sans-serif;font-size: 12px">
                        Download
                    </button>
                </div>
            </div>

最后 20 个：

<div class="row m-2">
    <input type="datetime-local" class="form-control-lg col m-2" name="date" default="">
    <input type="text" class="form-control-lg col m-2" name="location" placeholder="Where are You ?">
</div>
<div class="row m-2">
    <tags class="tagify form-control col m-2 tagify--noTags tagify--empty" tabindex="-1">
        <span contenteditable="" tabindex="0" data-placeholder="Hashtags" aria-placeholder="Hashtags" class="tagify__input" role="textbox" aria-autocomplete="both" aria-multiline="false"></span>

    </tags><input type="text" class="form-control col m-2" name="hashtags" placeholder="Hashtags">
    <tags class="tagify form-control col m-2 tagify--noTags tagify--empty" tabindex="-1">
        <span contenteditable="" tabindex="0" data-placeholder="Tag Your Friends" aria-placeholder="Tag Your Friends" class="tagify__input" role="textbox" aria-autocomplete="both" aria-multiline="false"></span>

    </tags><input type="text" class="form-control col m-2" name="tags" placeholder="Tag Your Friends">
</div>

<div class="row m-4">
    <input type="submit" class="btn btn-primary btn-lg col" id="abc" value="Create">
</div>

Answer 1

您解决了 request.file 的问题