Django：實現圖片上傳功能

Django是一個高效的web框架，具有多種功能，其中一項是實現圖片上傳功能。在使用Django進行Web開發過程中，圖片上傳是不可避免的需求，例如用戶頭像、商品圖片等。本文將從多個方面詳細介紹Django實現圖片上傳的方法。

一、配置

在Django中實現圖片上傳前，需要對配置進行正確設置，主要有以下步驟：

1、將上傳文件保存到指定目錄，需要在settings.py文件中進行配置。

# settings.py
MEDIA_ROOT = os.path.join(BASE_DIR, 'media')
MEDIA_URL = '/media/'

2、在項目根目錄下的urls.py文件中設置圖片上傳路由。

# urls.py
from django.conf.urls import url
from django.conf import settings
from django.conf.urls.static import static
from .views import upload_image

urlpatterns = [
    url(r'^upload/', upload_image, name='upload'),
] + static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)

二、上傳表單

實現圖片上傳功能需要一個表單，其中包含文件上傳的input標籤。在Django中，可以使用Django forms模塊創建表單。

1、在app目錄下創建forms.py文件，定義表單字段。

# forms.py
from django import forms

class ImageForm(forms.Form):
    image_file = forms.FileField(label='選擇圖片')

2、在views.py文件中編寫上傳視圖函數，用於處理圖片上傳請求。

# views.py
from django.http import JsonResponse
from django.shortcuts import render
from .forms import ImageForm

def upload_image(request):
    if request.method == 'POST':
        form = ImageForm(request.POST, request.FILES)
        if form.is_valid():
            img = form.cleaned_data['image_file']
            # 處理上傳的圖片
            return JsonResponse({'result': '上傳成功'})
        else:
            return JsonResponse({'result': form.errors})
    else:
        form = ImageForm()
        return render(request, 'upload.html', {'form': form})

3、在上傳頁面模板html文件中添加圖片上傳表單。

# upload.html

    {% csrf_token %}
    {{ form.as_p }}
    上傳

三、處理上傳的圖片

在上一步中我們完成了表單的上傳請求的處理，接下來需要處理具體的上傳操作。具體步驟如下：

1、在視圖函數中的判斷方法中處理上傳的圖片，並將圖片保存到media目錄中。

# views.py
import os
from django.conf import settings

def handle_uploaded_image(image_file):
    destination = open(os.path.join(settings.MEDIA_ROOT, image_file.name), 'wb+')
    for chunk in image_file.chunks():
        destination.write(chunk)
    destination.close()

def upload_image(request):
    if request.method == 'POST':
        form = ImageForm(request.POST, request.FILES)
        if form.is_valid():
            img = form.cleaned_data['image_file']
            handle_uploaded_image(img) # 保存圖片
            return JsonResponse({'result': '上傳成功'})
        else:
            return JsonResponse({'result': form.errors})
    else:
        form = ImageForm()
        return render(request, 'upload.html', {'form': form})

2、在上傳完成後，可以將上傳的圖片展示出來。

# views.py
from django.http import JsonResponse, HttpResponse
from django.shortcuts import render, redirect
from .forms import ImageForm
from .models import Image

def upload_success(request):
    images = Image.objects.all() # 獲取所有的Image對象
    return render(request, 'upload_success.html', {'images': images})

def handle_uploaded_image(image_file):
    destination = open(os.path.join(settings.MEDIA_ROOT, image_file.name), 'wb+')
    for chunk in image_file.chunks():
        destination.write(chunk)
    destination.close()
    Image.objects.create(image=image_file.name) # 在Image模型中創建一個記錄

def upload_image(request):
    if request.method == 'POST':
        form = ImageForm(request.POST, request.FILES)
        if form.is_valid():
            img = form.cleaned_data['image_file']
            handle_uploaded_image(img) # 保存圖片
            return redirect('upload_success')
        else:
            return JsonResponse({'result': form.errors})
    else:
        form = ImageForm()
        return render(request, 'upload.html', {'form': form})

3、在上傳成功頁面中展示上傳的圖片。

# upload_success.html
{% for image in images %}
    
{% endfor %}

四、總結

本文詳細介紹了使用Django實現圖片上傳功能的方法，在具體實現中，需要進行配置、創建上傳表單、處理上傳的圖片等多個步驟。希望本文能夠對開發者實現Django圖片上傳功能有所幫助。