이미지 업로드 화면 만들기

7275 단어 CSS

env


python3.6.8
win10

입문


이번에는 django로 이미지를 올리는 화면을 만듭니다.다음 순서에 따라django의 이미지를 업로드하고 표시할 수 있습니다.각자의 상세한 설명과 스케줄 설정 방법 등은 다른 사람에게 맡기고, 이 글에서 보도를 본 사람들로 하여금 일찌감치 정확하고 간단하게django에 이미지를 올리도록 한다.그래서 나는 거의 모든 웹 브라우저 사용자가 요구하지 않는 모호한 설명을 생략했다.진행 과정에서 언어 부족이 생길 수 있다고 생각했는데 미리 양해해 주셨으면 좋겠어요.그럼 가자.

지금 만들기 시작한 화면입니다.



사진을 올리는 화면을 만들다.위의 그림처럼 실제로 업로드한 후 표시해 보세요.

agenda


다음 절차를 통해 이미지를 업데이트하는 화면을 구축할 수 있습니다.프로젝트는 습관이 될 때까지 시간이 걸리지만 습관이 되면 5분 정도 화면을 만들 수 있다.
라이브러리 설치
미디어 디렉토리 추가
URL 설정
모범👈👈👈👈👈설정된 경우 이 섹션부터
양식
보기
거푸집
옮기다
관리 도구
참고 자료

라이브러리 설치


django에서 그림을 처리하려면 pillow라는 라이브러리가 필요합니다. 아래 명령으로 설치하십시오.
pip install pillow

settings.py 미디어 디렉터리 추가


settings.py에 추가, 수정은 다음과 같습니다.
MEDIA_ROOT = os.path.join(BASE_DIR, 'media')
MEDIA_URL = '/media/'
지정된 것이니 실제로 폴더도 만들자.프로젝트 폴더 바로 아래에 미디어라는 폴더를 만듭니다.manage를 모르면py 좀 찾아주세요.그곳과 같은 디렉터리 차원 구조에서 미디어라는 폴더를 만드십시오.여기에 그림을 업로드합니다.

URL 설정 항목의 URL입니다.py


urls.py는 응용 프로그램과 프로젝트 두 가지 상황이 있습니다.이번에는 프로젝트의 URLs입니다.py 끝에 다음 설정을 추가합니다.

프로젝트의 urls.py

urlpatterns += static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)
어려운 말로 설명하면 스케줄러 설정 (urls.py) 에 미디어 파일 공개용 URL을 추가합니다.

응용 프로그램 urls.py

    path('model_form_upload/', views.model_form_upload, name='model_form_upload'),
물론 항목과 응용 프로그램을 틀리면 움직이지 않으니 꼼꼼히 확인하세요.

모범


그럼, 우리 먼저 그림을 처리하는 모형을 하나 쓰자.각양각색의 묘사법이 있는데, 나는db디자인을 한 후에 먼저 모형을 쓴다.
from django.db import models

class Document(models.Model):
    description = models.CharField(max_length=255, blank=True)
    photo = models.ImageField(upload_to='documents/', default='defo')👈👈👈👈👈
    uploaded_at = models.DateTimeField(auto_now_add=True)
upload_to를 "documents"로 설정하면 그림은/media/documents에 저장됩니다.미디어는 아까 만든 폴더죠?거기에 그림을 저장했습니다.

양식

from django import forms
from .models import Document👈👈👈👈👈


class DocumentForm(forms.ModelForm):
    class Meta:
        model = Document
        fields = ('description', 'photo',)
from .models import Document를 쓰는 것을 잊지 마세요.👈👈👈👈👈

보기

from django.shortcuts import render, redirect
from .forms import DocumentForm👈👈👈👈👈
from .models import Document👈👈👈👈👈


def index(request):
    if request.method == 'POST':
        form = DocumentForm(request.POST, request.FILES)
        if form.is_valid():
            form.save()
            #return redirect('apprication:model_form_upload')👈👈👈👈👈
            return redirect('apprication:index')👈👈👈👈👈


    else:
        form = DocumentForm()
        obj = Document.objects.all()

    return render(request, 'apprication/model_form_upload.html', {👈👈👈👈👈
        'form': form,
        'obj': obj
    })
from .forms import DocumentForm
from .models import Document
쓰는 거 잊지 마세요.
그리고
return redirect('apprication:model_form_upload')
기재가 있다.이것은/model_form_업로드로 날아간다는 뜻이에요.예를 들어 페이지를 첫 페이지로 이동하려면 다음과 같이 설정합니다. ※하면, 만약, 만약...
return redirect('apprication:index')
페이지 마이그레이션을 위해 기존 상태를 유지하지 않으려면 다음과 같이 설정하십시오.페이지 이동을 하지 않고 업로드된 텍스트와 이미지를 표시해야 합니다.또한 이 시기에 이미지가 미디어 폴더로 전송됩니다.
#return redirect('apprication:model_form_upload')
그럼,redirect 다음은render입니다.
return render(request, 'apprication/model_form_upload.html', {
검증 검사가 통과되었을 때의 어떤 html를 지정합니다.model_form_업로드 및 애플리케이션/모델_form_upload.환경에 따라 html를 변경하십시오.작법이 다르다는 것을 주의하세요.

템플릿\template\apprication\model_form_upload.html


제목에 html를 놓습니다.
<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Upload</title>
    </head>
    <body>

        <form method="post" enctype="multipart/form-data">
            {% csrf_token %}
            {{ form.as_p }}
            <button type="submit">Upload</button>
        </form>

     {% for item in obj %}
    <tr>
        <td>{{ item.description }}</td>
        <td><img src="{{ item.photo.url }}" width="100" height="100"/></td>
        <td>{{ item.uploaded_at }}</td>
    <tr>
    {% endfor %}
    </body>
</html>

옮기다


다음 명령으로db 설정을 다시 정의합니다.
python manage.py makemigrations
python manage.py migrate
python manage.py runserver

구현 확인


우선 아래 URL을 클릭하세요.
http://127.0.0.1:8000/model_form_upload/
화면이 표시되면 글과 이미지를 입력하고 버튼을 누르십시오

만든 미디어 폴더에서

이미지만 올리면 확인할 수 있어요.몇 번 실시해 보세요.나중에 관리 도구를 사용하여 이미지를 삭제할 수도 있습니다.

관리 도구


관리 도구에 항목을 등록하면 이미지를 삭제할 수 있습니다.http://localhost:8000/admin에서 설명한 대로 해당 매개변수의 값을 수정합니다.이번에는 관리자 도구로 데이터를 만들어 웹에 실제로 표시할 수 있는지 확인한다.

admin.py

from django.contrib import admin
from .models import Document

# Register your models here.
admin.site.register(Document)
관리 도구로 데이터를 추가할 수도 있습니다.

실제 사이트에 가면...

나는 방금 관리자 도구로 입력한 데이터를 저장한 것을 발견했다.

번외편


사용자를 만들지 않으면 아래에 사용자를 만듭니다.
python manage.py createsuperuser
사용자 이름(admin)
이메일 주소[email protected]
암호 (적절)

좋은 웹페이지 즐겨찾기