django - 如何在 Django 中使用 html 按钮删除上传的图像？

Question

如何从我的 updateview 模板中删除上传的图像？我尝试使用<input type="checkbox" onchange="submit();" name="{{ object.image }}-clear" id="{{ object.image }}-clear_id">删除图像但没有成功。

我有django_cleanup，INSTALLED_APPS所以我只是在寻找一种简单的方法来从我的对象中删除图像并返回到当前更新视图。

代码：

模型.py：

class Report(models.Model):

    image = models.FileField(storage=PublicMediaStorage(), blank=True)

表格.py：

class ReportCreate(forms.ModelForm):
    def __init__(self, *args, **kwargs):
        super(ReportCreate, self).__init__(*args, **kwargs)

    class Meta:
        model = Report

        fields = ['image']
        widgets = {'image': forms.FileInput(attrs={'onchange': 'submit();'}),}

视图.py：

class ReportView(LoginRequiredMixin, UserPassesTestMixin, UpdateView):

    model = Report

    template_name = 'myapp/report_update.html'
    form_class = forms.ReportCreate

    def form_valid(self, form):
        form.instance.author = self.request.user
        return super().form_valid(form)

网址.py：

urlpatterns = [
    path('report/<int:pk>/', ReportView.as_view(), name='report-view'),
]

html:

<img src="{{ object.image }}"/>
<input type="file" name="image" onchange="submit();" class="fileinput fileUpload form-control-file" id="id_image">
<input type="checkbox" onchange="submit();" name="{{ object.image }}-clear" id="{{ object.image }}-clear_id">

标签： django

Answer 1

更新报告模型

image = models.ImageField(storage=PublicMediaStorage(), null=True, blank=True)

在views.py

from django.views.generic import View

class ReportImageDeleteView(View):
    # you can either user POST, PUT or DELETE methods respectively 
    def get(self, request):

        report = Report.objects.get(id=self.kwargs.get('pk'))
        report.image = None
        report.save()

        return render(request, 'your_template.html')

# url
path(
    'report/<int:pk>/delete/',
    ReportImageDeleteView.as_view(),
    name='image-delete'
),

在模板中

<input type="checkbox" onchange="clearImage({{ object.id }});" name="{{ object.image }}-clear">

<script>
function clearImage(id) {
    var url = `/report/${id}/delete/`;
    window.location = url; // redirect
}
</script>