如何将图像添加到我的 django 数据库并在前端显示

Question

I am making a blogging website in Django. I want to add a functionality with which the user can upload an image in the form, which will be used as a thumbnail for that blog. I have added imageField in models.py file, now I am not getting how shall I take the image input from the user in the form section?

post models.py:

class Post(models.Model):
    sno = models.AutoField(primary_key=True)
    thumbnail = models.ImageField(null=True, blank=True, upload_to="images/")
    title = models.CharField(max_length=50)
    content = RichTextField(blank=True, null=True)
    author = models.CharField(max_length=50)
    slug = models.CharField(max_length=200)
    timeStamp = models.DateTimeField(auto_now_add=True)

    class Meta:
        ordering = ['-timeStamp']

    def __str__(self):
        return self.title + " by " + self.author

html forms:

 <form action = "{% url 'addblog' %}" method="post">

        <div class="form-group">
            <label for="title" id="Title">Title</label>
            <input type="text" class="form-control" id="title" name="title"/>
            
        </div>
        {% csrf_token %}
        <div class="form-group">
           
            
            <textarea name="content"></textarea>
            <script type = 'text/javascript'>
                CKEDITOR.replace("content")
            </script>
        </div>

        <button type="submit" class="btn btn-primary my-1" id='contact-button'>Post</button>
    </form>

currently the add blog page looks like this:

now I want a choose file option after the content text area where the user can upload an image and then that image gets saved in the database, after which I can display the image in the blog section at frontend.

Answer 1

pip install pillow

change <form> to this:

<form method="post" enctype="multipart/form-data">
<input type='file' name='imagefile'>

require "multipart/form-data" to send image or file from form.

in settings.py add code:

MEDIA_URL = '/media/'

in views.py if you are using function based view, do this:

image = request.FILES.get('imagefile')
post = Post()
post.thumbnail=image

add other fields of the model.

save model by using post.save() command.

image.filename returns new file name of the image.

it will directly save image in media/images/ folder