summernote3：GPT写的

最新推荐文章于 2024-07-05 10:10:36 发布

癫狂的兔子

最新推荐文章于 2024-07-05 10:10:36 发布

阅读量48

点赞数

文章标签： gpt django html

本文链接：https://blog.csdn.net/qq_45800521/article/details/131757266

版权

以下是一个简单的 Django 示例代码，演示如何使用 summernote 实现前端上传图片并将其存储在数据库中，并在后端将数据库中的图片信息解码到前端以图片形式呈现给用户。

前端代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Summernote Image Upload Example</title>
    <!-- 引入 jQuery -->
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
    <!-- 引入 summernote -->
    <link href="https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote-bs4.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote-bs4.js"></script>
</head>
<body>
    <form method="POST" enctype="multipart/form-data">
        {% csrf_token %}
        <textarea id="summernote" name="content"></textarea>
        <input type="file" id="uploadImage" style="display: none;">
        <button type="submit">保存</button>
    </form>

    <script>
        $(document).ready(function() {
            $('#summernote').summernote({
                height: 300,
                callbacks: {
                    onImageUpload: function(files) {
                        var file = files[0];
                        var formData = new FormData();
                        formData.append('image', file);
                        $.ajax({
                            url: '/upload_image/',  // 后端处理图片上传的 URL
                            method: 'POST',
                            data: formData,
                            processData: false,
                            contentType: false,
                            success: function(response) {
                                var imageUrl = response.image_url;
                                $('#summernote').summernote('insertImage', imageUrl);
                            },
                            error: function() {
                                alert('图片上传失败');
                            }
                        });
                    }
                }
            });
        });
    </script>
</body>
</html>

后端代码：

from django.shortcuts import render
from django.http import JsonResponse
from django.views.decorators.csrf import csrf_exempt

@csrf_exempt
def upload_image(request):
    if request.method == 'POST' and request.FILES.get('image'):
        image = request.FILES['image']
        # 保存图片到数据库或其他存储系统
        # 这只是一个示例，你需要根据自己的需求对图片进行处理和保存
        # 以下是将图片保存在数据库的示例
        image_data = image.read()
        # 假设有一个名为 Image 的模型类，含有一个名为 data 的二进制字段用于保存图片数据
        image_model = Image(data=image_data)
        image_model.save()
        # 返回图片保存后的信息，供前端使用
        response_data = {
            'image_url': image_model.get_absolute_url(),  # 根据自己的需求生成图片访问 URL
        }
        return JsonResponse(response_data)
    return JsonResponse({'error': '请求无效'})

请注意，这只是一个示例代码，需要根据实际情况进行适当的修改和调整。另外，需要自行定义一个用于保存图片的数据库模型，并根据自己的需求进行图片的处理和存储。

癫狂的兔子

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
summernote3：GPT写的

以下是一个简单的 Django 示例代码，演示如何使用 summernote 实现前端上传图片并将其存储在数据库中，并在后端将数据库中的图片信息解码到前端以图片形式呈现给用户。请注意，这只是一个示例代码，需要根据实际情况进行适当的修改和调整。另外，需要自行定义一个用于保存图片的数据库模型，并根据自己的需求进行图片的处理和存储。// 后端处理图片上传的 URL。
复制链接

扫一扫