我如何在 Django 模板中使用 filepond javascript 库？

Question

简介：我有 Django 网络应用程序，允许用户创建 posts。每个 post 都有多个与 post 关联的图像。

我想做什么：我想使用 Filepond javascript 库来删除、添加更多和预览所选图像。

问题：下面的代码在没有 filepond 库的情况下工作正常，但如果我尝试使用 filepond 库，则表单仅提交 title input 而没有文件。

views.py

class NewsCreateView(CreateView):
    form_class = FileForm
    template_name = 'create.html'
    success_url = '/'

    def form_valid(self, form):
        post = form.save(commit=False)
        post.author = self.request.user
        post.save()
        for f in self.request.FILES.getlist('filepond'):
            FileModel.objects.create(post=post, file=f)
        return super().form_valid(form)

create.html

<link href="https://unpkg.com/filepond/dist/filepond.css" rel="stylesheet">
<link href="https://unpkg.com/filepond-plugin-image-preview/dist/filepond-plugin-image-preview.css" rel="stylesheet">


<div class="content">
    <div class="row">
        <div class="col-md-12">
            <div class="hpanel" style="margin-top: 10px;">
                <form method="POST" enctype="multipart/form-data">
                    {% csrf_token %}
                    <div class="form-group">
                        <input type="text" id="id_title" name="title" class="form-control">
                        <input type="file" id="id_file" name="file" multiple="true">                    
                    </div>
                    <button class=" btn btn-success btn-block" type="submit">Submit</button>
                </form>
            </div>
        </div>
    </div>
</div>
<script src="https://unpkg.com/filepond-plugin-image-preview/dist/filepond-plugin-image-preview.min.js"></script>
<script src="https://unpkg.com/filepond/dist/filepond.min.js"></script>

<script>
    FilePond.registerPlugin(
        FilePondPluginImagePreview
    );

    FilePond.create(
        document.querySelector('input[type="file"]')
    );
</script>

Answer 1

无法设置文件输入值，请参阅：https://pqina.nl/blog/the-trouble-with-editing-and-uploading-files-in-the-browser/

所以 FilePond 不会更新现有的文件输入。

您要么必须通过设置 FilePond server 属性异步上传文件，要么使用 Filepond 文件编码插件将文件编码为 base64 数据，该数据可以作为字符串.

我如何在 Django 模板中使用 filepond javascript 库？

How can i use filepond javascript library in Django template?

html

javascript

django

filepond