Upload File trong lập trình Website với Python

Ghi chú

Nội dung bài viết bạn đang xem được update từ tháng 06/2019. Vì vậy sẽ có đôi chút khác biệt giữa VIDEO và NỘI DUNG BÀI VIẾT.

Chúng ta sẽ có nhiều cập nhập hơn về cả bài viết lẫn video trong thời gian tới. Nhớ like / share hoặc đánh giá 5 sao để Kteam có động lực nhé! 

Cảm ơn các bạn! 

Dẫn nhập

Ở bài trước, Kteam đã hướng dẫn các bạn xong DJANGO SỬ DỤNG MÔ HÌNH MVC

Trong bài này Kteam hướng dẫn cách upload file ảnh vào trang web được làm bằng Django MVC.

Nội dung

Để theo dõi bài này tốt nhất, bạn nên xem qua bài:

• GIỚI THIỆU VỀ PYTHON DJANGO
• TẠO PROJECT VỚI PYTHON DJANGO
• TẠO WEB APP VÀ XỬ LÝ KHI NGƯỜI DÙNG YÊU CẦU TRUY CẬP TRONG PYTHON DJANGO
• SỬ DỤNG TEMPLATE VÀ JINJA TRONG PYTHON DJANGO
• FILE TĨNH VÀ THIẾT KẾ WEB BẰNG BOOTSTRAP TRONG PYTHON DJANGO
• THIẾT KẾ HOÀN CHỈNH BLOG TRONG PYTHON DJANGO
• DÙNG MODEL TẠO BẢNG DATABASE BẰNG NGÔN NGỮ PYTHON
• TƯƠNG TÁC DATABASE BẰNG NGÔN NGỮ PYTHON
• HỆ THỐNG ADMIN TRONG PYTHON DJANGO
• LIỆT KÊ DANH SÁCH BÀI VIẾT TRONG PYTHON DJANGO
• HIỂN THỊ THÔNG TIN BÀI VIẾT TRONG PYTHON DJANGO
• LOẠI BỎ HARDCODED URL TRONG PYTHON DJANGO.
• XỬ LÝ LỖI 404 TRONG PYTHON DJANGO
• DJANGO SỬ DỤNG MÔ HÌNH MVC

Bài này sẽ giới thiệu những nội dung sau:

• Tạo thêm field models để chứa thông tin file ảnh
• Cách lưu trữ ảnh đã upload
• Hiển thị ảnh lên trang web

Tạo thêm field models để chứa thông tin file ảnh

Trước tiên, hãy nhớ chuyển DEBUG = TRUE để tiếp tục phát triển website.

Bây giờ, Kteam muốn mỗi bài viết sẽ có 1 bức ảnh đại diện mỗi bài, nên Kteam sẽ vào models chỉnh Post thêm field image như sau:

class Post(models.Model):
    title = models.CharField(max_length=100)
    body = models.TextField()
    date = models.DateTimeField(auto_now_add=True)
    image = models.ImageField(null=True)

    def __str__(self):
        return self.title
1
2
3
4
5
6
7
8
9

Ở đây thì Kteam cho phép field có giá trị null, nguyên nhân là trong các bài trước Kteam đã lỡ tạo 2 bài viết, nếu bây giờ không cho phép null thì sẽ dính lỗi logic vì 2 bài viết trước đó không có ảnh. Nếu không có null thì sẽ hiện lỗi như sau:

Lúc đó, nên chọn 2 thoát ra và chỉnh field mới làm cho phép null.

Lưu ý: Nếu khi chạy makemigrations mà thấy lỗi này thì do thiếu thư viện Pillow, bạn hãy chạy lệnh pip để cài thêm vào.

Sau khi tạo được file migrations, thì dùng lệnh migrate để cập nhật là Database:

Cách lưu trữ ảnh đã upload

Giờ ta thử vô admin, vào post và upload 1 file ảnh lên:

Sau khi upload xong, thử nhấn đường dẫn đến bức ảnh đã upload xem:

Ta sẽ thấy Django sẽ không hiểu được đường dẫn web đó

Giờ ta thử quay lại Project để xem bức ảnh đó ở đâu:

Ta sẽ thấy bức ảnh ngay trong project, có lẽ không nên để bức ảnh lộn xộn như vậy mà nên tập trung vào 1 folder lưu trữ.

Nguyên nhân lỗi ở trên là do Django không thể map đường url bức ảnh và folder chứa ảnh đó. Nhiệm vụ của chúng ta là nên map 2 cái đó lại để Django biết url này nên lấy bức ảnh nào.

• Bước 1: Kteam sẽ tạo ra 1 folder media để chứa các bức ảnh upload, sau đó move ảnh upload lúc nãy vào folder này

• Bước 2: Vào settings.py khai báo đường dẫn url media và folder media

• Bước 3: Ta sẽ map url media và folder media này lại, ta sẽ qua urls.py tổng để khai báo:

from django.contrib import admin
from django.urls import path, include
from django.conf.urls import handler404
from django.conf.urls.static import static
from django.conf import settings

urlpatterns = [
    path('admin/', admin.site.urls),
    path('', include('home.urls')),
    path('blog/', include('blog.urls')),
] 

if settings.DEBUG:
    urlpatterns += static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)

handler404 = 'home.views.error'
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

• Đầu tiên là import static và settings.
• Tiếp theo, ta sẽ kiểm tra xem Project có DEBUG bằng True không, vì ở chế độ DEBUG ta mới cần map giữa url media và folder media. Còn khi deploy lên server, thì web server sẽ chịu trách nhiệm các đường dẫn file ảnh, Django không cần thực hiện cái map này.
• Nếu DEBUG là True, urlpatterns sẽ thêm 1 url static, đó là đường dẫn /media/ mà ở đây là giá trị của biến MEDIA_URL, folder static chính là folder media mà mình xử lý ở biến MEDIA_ROOT.

Sau khi restart server, ta thử vào lại đường dẫn hình:

Ta thấy Django đã có đường dẫn /media/ và nó có thể lấy bức ảnh 1.jpg tương ứng đường dẫn /media/1.jpg.

Lưu ý: Nếu upload file trùng tên với một file đã có trong kho lưu trữ thì Django sẽ tự tạo 1 đoạn mã sau để phân biệt, Kteam sẽ upload chung 1 file ở bài viết thứ 2

Hiển thị ảnh lên trang web

Như vậy, sau khi upload xong, Kteam sẽ hiển thị bức ảnh đó ở mỗi bài viết như sau:

• template post.html:

{% extends "pages/base.html" %}
 
{% block title %}Blog{% endblock %}
 
{% block content %}
{% for post in Posts %}
    <h4>{{post.date|date:"d-m-Y"}}<a href="{% url 'post' post.id %}">{{post.title}}</a></h4>
    <img src="{{post.image.url}}" width="500px" height="300px" />
{% endfor %}
{% endblock %}

1
2
3
4
5
6
7
8
9
10
11
12

• template blog.html:

{% extends "pages/base.html" %}
 
{% block title %}{{post.title}}{% endblock %}
 
{% block content %}
<h3><a href="blog/{{post.id}}">{{post.title}}</a></h3>
<img src="{{post.image.url}}" width="500px" height="300px" />
<h6>on {{post.date}}</h6>
{{post.body|safe|linebreaks}}
{% endblock %}

1
2
3
4
5
6
7
8
9
10
11
12

Kteam sẽ phải dùng post.image.url để lấy được giá trị đường dẫn url bức ảnh rồi gán mà src của tag img.

Kết

Trong bài này, chúng ta đã tìm hiểu cách Upload File trong lập trình Website với Python.

Bài sau chúng ta sẽ cùng tìm hiểu về cách TẠO FORM ĐĂNG KÝ TÀI KHOẢN.

Cảm ơn các bạn đã theo dõi bài viết. Hãy để lại bình luận hoặc góp ý của mình để phát triển bài viết tốt hơn. Và đừng quên “Luyện tập – Thử Thách – Không ngại khó”

---

Tải xuống

Tài liệu

Nhằm phục vụ mục đích học tập Offline của cộng đồng, Kteam hỗ trợ tính năng lưu trữ nội dung bài học Upload File trong lập trình Website với Python dưới dạng file PDF trong link bên dưới.

Ngoài ra, bạn cũng có thể tìm thấy các tài liệu được đóng góp từ cộng đồng ở mục TÀI LIỆU trên thư viện Howkteam.com

Đừng quên like và share để ủng hộ Kteam và tác giả nhé!

Thảo luận

Nếu bạn có bất kỳ khó khăn hay thắc mắc gì về khóa học, đừng ngần ngại đặt câu hỏi trong phần BÌNH LUẬN bên dưới hoặc trong mục HỎI & ĐÁP trên thư viện Howkteam.com để nhận được sự hỗ trợ từ cộng đồng.

CỘNG ĐỒNG HỎI ĐÁP HOWKTEAM.COM

GROUP THẢO LUẬN FACEBOOK