Day07 美食的倉庫建立檔案儲存機制

14th鐵人賽

yenshaoting

團隊台南巷弄美食獵人

2022-09-22 21:52:12

1146 瀏覽

分享至

摘要

昨天已經使用Django ORM 來描述一間店家 Place ，今日會先新增照片的ORM，讓我們可以從後台上傳照片，同時也會說明Django 如何管理的上傳的檔案。

概念說明

Untitled

網站的檔案管理

一個網頁除了html語法外，常會包含 css js 檔案，另外也有多媒體元素包含音樂、圖片、影片等等，網站開發者需要找一個地方放置這些檔案。常見的方法有以下幾種
- 伺服器上的資料夾
  最傳統的方式，將上述所有檔案放到自己管理的資料夾，再讓伺服器去讀取即可。
- 使用內容傳遞網路（CDN）
  常見於受歡迎的 css js 框架，像是前幾天提到的Bootstrap ，可以減少自身伺服器的流量。
  缺點是如果本地開發，處於斷網狀態後，就會無法正常運作。
- 雲端服務儲存體
  使用AWS Azure GCP等雲端服務的儲存空間，此方法可以減少管理伺服器磁碟空間的心力，存取雲端的檔案，不管是速度還是可靠度都較穩定。
除了網頁上會使用到的檔案，也會需要讓使用者上傳檔案
- 檔案如何放置儲存、如何給使用者瀏覽、檔案的瀏覽權限等等都是需要注意的問題。
Django 是一個很完整的框架，許多機制都很完善，基本上只需要設定一次即可，基本上都是在settings.py設定一些全域變數即可。
為了解決這個問題，在Django中另外提供了一個叫做media資料夾的功能，在settings.py中做一些設定，就可以讓讓資料夾中的檔案可以即時地被網站中的程式加以存取利用，所以，我們就可以把上傳之後的檔案放到那個資料夾中。
- 引用自 https://104.es/2022/03/19/django-upload_files/
- https://docs.djangoproject.com/en/3.2/topics/files/

本日成果

新增Photo and Admin site

新增新的ORM，還要再設定Admin 才可以在django管理者介面看到基本的管理介面。

# food/models.py
class Photo(models.Model):
    name=models.CharField(max_length=255)
		#照片我們會使用ImageField 這個欄位，upload_to 是表示檔案要儲存在哪個資料夾
    file=models.ImageField(upload_to='photos')

# food/admin.py
from django.contrib import admin

from .models import Photo
from .models import Place

admin.site.register(Photo, admin.ModelAdmin)
admin.site.register(Place,admin.ModelAdmin)

安裝pillow and migrate
- ImageField 會需要安裝 pillow ，在requirements.txt 新增套件要記得安裝喔。
```
# requirements.txt
Django==3.2
Pillow==9.2.0
```
- 建立好ORM 要Migrate 才會建立資料表
```
pip install -r requirements.txt
python manage.py makemigrations
python manage.py migrate
```
- 結果

設定全域變數來決定檔案上傳位置

提供檔案給網頁渲染使用的如 css js icon 圖片聲音等，會設定 STATIC_* 的環境變數
設定上傳檔案儲存位置的，會設定 MEDIA_*

mysite/settings.py

STATIC_URL = 'static/'
STATIC_ROOT='static/'
MEDIA_ROOT = Path.joinpath(BASE_DIR, 'media')
MEDIA_URL = '/media/'

mysite/urls.py

urlpatterns = \
    [
        path('admin/', admin.site.urls),
        path('food/', include('food.urls')),
        path('', index)
    ] + static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)

手動上傳圖片

將圖片傳至前端

前端顯示圖片的方式是使用檔案儲存的網址，因此只要將照片的url 嵌入 img 元素即可。

food/views.py

因為我們上傳了一張圖片，就直接使用Photo.objects.first() 來抓取第一張圖。

def index(request):
    photo = Photo.objects.first()
    places = Place.objects.all()
    return render(
        request,
        'food/index.html',
        {'store_list': places, 'photo': photo.file}
    )

food/templates/food/index.html

Photo 物件的 file 變數是 ImageField 型別，此型別的物件可以使用 obj.url取得網址。
- https://docs.djangoproject.com/en/3.2/ref/models/fields/#django.db.models.FileField

{% for store in store_list %}
              <div class="col-4 grid-item p-0 m-1">
                <div class="grid-item-img">
                  <img style="max-width:280px" src="{{ photo.url }}" alt="">
                </div>
                <label for="">{{ store.name }}</label>
              </div>

            {% endfor %}