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

Question

簡介：我有 Django web 應用程序，允許用戶創建帖子。 每個帖子都有多個與該帖子相關聯的圖像。

我想做什么：我想使用Filepond javascript 庫來刪除、添加更多和預覽選定的圖像。

問題：下面的代碼在沒有 filepond 庫的情況下工作正常，但是如果我嘗試使用 filepond 庫，表單只會提交沒有文件的title input 。

視圖.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)

創建.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 數據，該數據可以作為字符串發送到服務器。