通过javascript动态添加图片到django页面？

from django.urls import path
from . import views

urlpatterns = [
    path('upload_image/', views.upload_image, name='upload_image'),
]

from django.shortcuts import render
from django.http import JsonResponse

def upload_image(request):
    if request.method == 'POST' and request.FILES.get('image'):
        image = request.FILES['image']
        # 在此处可以根据需求设置图片保存的路径和文件名
        # 保存图片到服务器指定路径
        with open('path/to/save/image.jpg', 'wb') as f:
            for chunk in image.chunks():
                f.write(chunk)
        return JsonResponse({'success': True})
    return JsonResponse({'success': False})

function uploadImage() {
    var input = document.getElementById('image-input');
    var image = input.files[0];
    var formData = new FormData();
    formData.append('image', image);

    fetch('/upload_image/', {
        method: 'POST',
        body: formData
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            var imageUrl = '/path/to/save/image.jpg';  // 替换为实际保存的图片URL
            var img = document.createElement('img');
            img.src = imageUrl;
            document.getElementById('image-container').appendChild(img);
        } else {
            console.log('Image upload failed.');
        }
    })
    .catch(error => {
        console.error('Error:', error);
    });
}

<input type="file" id="image-input" accept="image/*">
<button onclick="uploadImage()">Upload Image</button>
<div id="image-container"></div>