分离与继承的思想实现图片上传后的预览功能：ImageUploadView

“分离与继承的思想实现图片上传后的预览功能：ImageUploadView”是一种实现图片上传并预览的常用方法，下面将详细讲解如何实现这种功能。

步骤1：创建基类

首先，需要创建一个名为BaseImageUploadView的基类，用于实现图片上传功能。这个基类可以包含一些公共方法和属性，用来处理图片上传的逻辑，比如上传图片的最大大小和格式等。

from django.views.generic import View


class BaseImageUploadView(View):
    max_size = 2 * 1024 * 1024
    allowed_formats = ('jpeg', 'jpg', 'png')

    def post(self, request):
        image = request.FILES.get('image', None)
        if image is None:
            return self._fail('No image uploaded')

        if image.size > self.max_size:
            return self._fail('Image too large')

        if not self._is_allowed_type(image.name):
            return self._fail('Invalid image type')

        return self._success(image)

    def _is_allowed_type(self, filename):
        return filename.lower().split('.')[-1] in self.allowed_formats

    def _fail(self, message):
        return JsonResponse({'success': False, 'message': message})

    def _success(self, image):
        return JsonResponse({'success': True, 'url': image.url})

步骤2：创建子类

接下来，需要针对具体的图片上传需求创建一个名为ImageUploadView的子类，继承自BaseImageUploadView。这个子类可以重写父类的方法，以实现图片上传后的预览功能。

from django.core.files.storage import default_storage
from django.core.files.base import ContentFile


class ImageUploadView(BaseImageUploadView):
    def _success(self, image):
        url = default_storage.save(image.name, ContentFile(image.read()))
        return JsonResponse({'success': True, 'url': default_storage.url(url)})

这个子类重写了父类的_success方法来保存上传的图片，并将保存后的URL返回给客户端。这里使用默认的文件存储方式，将上传的图片保存到MEDIA_ROOT目录下，然后返回图片的URL地址。

步骤3：编写模板和JavaScript代码

最后，需要编写一个HTML模板和JavaScript代码来实现图片上传和预览功能。

下面是一个简单的HTML模板，用于上传图片并显示上传后的预览效果：

{% extends "base.html" %}

{% block content %}
  <form method="post" enctype="multipart/form-data">
    {% csrf_token %}
    <input type="file" name="image" id="image">
    <button type="submit">Upload</button>
  </form>

  <div id="preview"></div>
{% endblock %}

{% block javascript %}
  <script>
    var form = document.querySelector('form');
    var input = document.querySelector('input[type="file"]');
    var preview = document.querySelector('#preview');

    form.addEventListener('submit', function(e) {
      e.preventDefault();

      var xhr = new XMLHttpRequest();
      xhr.open('POST', form.action);
      xhr.onload = function() {
        var response = JSON.parse(xhr.responseText);
        if (response.success) {
          preview.innerHTML = '<img src="' + response.url + '">';
        } else {
          alert(response.message);
        }
      };

      var formData = new FormData();
      formData.append('csrfmiddlewaretoken', '{{ csrf_token }}');
      formData.append('image', input.files[0]);

      xhr.send(formData);
    });
  </script>
{% endblock %}

这个模板包含一个HTML表单，用户可以通过它上传图片。它还包含一个用于显示上传后的预览效果的DIV元素，上传成功后，会在这个DIV中插入一张预览图像。

JavaScript代码用于发出AJAX请求来上传图片，它会监听表单的submit事件，并在事件触发时，将选择的图片文件和令牌添加到FormData对象中。接着，使用XMLHttpRequest对象来发送这个FormData，并监听它的onload事件。如果请求成功，就将服务器返回的URL解析为图像，并将其插入到预览区域中，否则就弹出错误消息。

示例说明1

在具体实现过程中，可以通过修改MAX_SIZE和ALLOWED_FORMATS属性来设置图片上传的限制条件。比如，可以将限制上传的图片格式改为'png'和'bmp'等。

class BaseImageUploadView(View):
    max_size = 2 * 1024 * 1024
    allowed_formats = ('png', 'bmp')

示例说明2

如果需要将上传的图片保存到不同的目录下，可以使用Django提供的自定义文件存储类。可以在ImageUploadView中重写_success方法，并在其中使用自定义的文件存储类来保存上传的图片。

class ImageUploadView(BaseImageUploadView):
    def _success(self, image):
        myfile = ContentFile(image.read())
        filename = self.get_filename(image.name)
        self.storage.save(filename, myfile)
        return JsonResponse({'success': True, 'url': self.storage.url(filename)})

    def get_filename(self, filename):
        return 'uploads/' + filename

这个示例中，定义了get_filename方法来生成保存在uploads目录中的文件名。通过重写_success方法来使用自定义的文件存储类来保存上传的图片，并将保存后的URL返回给客户端。这里使用了一个名为MyStorage的自定义文件存储类，用于保存图片。

from django.core.files.storage import FileSystemStorage


class MyStorage(FileSystemStorage):
    def __init__(self, location=None, base_url=None):
        if location is None:
            location = settings.MEDIA_ROOT + 'uploads/'
        if base_url is None:
            base_url = settings.MEDIA_URL + 'uploads/'
        super().__init__(location=location, base_url=base_url)

这个自定义文件存储类继承自FileSystemStorage，用于将上传的图片保存到uploads目录下。可以在BaseImageUploadView中来定义要使用的文件存储类：

class BaseImageUploadView(View):
    storage = MyStorage()