あなたのDjangoアプリで同時に複数の画像をアップロードする

24092 ワード

こんにちは、それは1分でした!私は小さな休憩になっていたが、今戻っていると、このチュートリアルでは、我々はどのように我々はdjangoバックエンドに複数の画像をアップロードすることを学ぶつもりです.デフォルトでは、Djangoの動作は、単一のイメージを選択し、サーバーにそれをアップロードすると、質問は、時間がかかると退屈なプロセスではないという質問を繰り返して、我々は1000画像を持っている場合言う?それは.
幸いにも、この問題を回避するのに役立つツールがありますDropzone . もっと秒を無駄にしないようにしましょう!

プロジェクト設定

すぐに我々のデスクトップディレクトリに移動して、バックエンドをブートストラップしましょう.

cd ~/Desktop

mkdir django_dropzone && cd django_dropzone

virtualenv env

source env/bin/activate

pip install django

django-admin startproject mysite .

python manage.py startapp core

次の追加core インストールされているアプリケーションの一覧にsettings.py .
テンプレートセクションも次のように更新されます.

import os

'DIRS': [os.path.join(BASE_DIR, 'templates')],

次のように静的設定も更新します.

STATIC_URL = '/static/'
if DEBUG:
    STATICFILES_DIRS = [os.path.join(BASE_DIR, 'static')]
else:
    STATIC_ROOT = os.path.join(BASE_DIR, 'static')

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

イメージモデル

我々は準備したsettings.py そして、行くのは良いです.移動するcore/models.py 次のコードを追加します.

from django.db import models

# Create your models here.

class Image(models.Model):
    image=models.ImageField(upload_to='images/')
    date = models.DateTimeField( auto_now_add=True)

    class Meta:
        ordering=['-date']

    def __str__(self):
        return str(self.date)

どうぞmakemigrations then migrate 変更をdbに適用します.
次は我々はviews.py . 次のコードを書き込みます.

from django.shortcuts import render
from django.http import HttpResponse, JsonResponse
from .models import Image
# Create your views here.

def home(request):
    images=Image.objects.all()
    context={
        'images':images
    }
    return render(request, 'index.html', context)

def file_upload(request):
    if request.method == 'POST':
        my_file=request.FILES.get('file')
        Image.objects.create(image=my_file)
        return HttpResponse('')
    return JsonResponse({'post':'fasle'})

ネクストクリエイトcore/urls.py 次のコードを追加します.

from django.urls import path
from . import views
urlpatterns = [
    path('', views.home, name='home'),
    path('upload/', views.file_upload),
]

Python部分を終了するには、プロジェクトの次のコードを追加しますurls.py

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

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

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

ドロップゾーン設定

私たちは、ロジックを使って、UIのものをしましょう.フォルダを作成するstatic その中に2つのファイルを作ります.

touch static/main.js

touch static/style.css

次のコードを追加しますmain.js :

Dropzone.autoDiscover=false;
const myDropzone= new Dropzone('#my-dropzone',{
    url:'upload/',
    maxFiles:5,
    maxFilesize:2,
    acceptedFiles:'.jpg',
})

そして以下のstyle.css :

body {
    background-color: #f8f8f8 !important;
}

.dz {
    border: dashed !important;
    background-color: #ccc !important;
    border-radius: 10px !important;
}

.dz:hover {
    background-color: aliceblue !important;
}

次にフォルダと呼ばれるフォルダを作成するtemplates その中に2つのファイルを作ります.

touch templates/base.html

touch templates/index.html

次のコードを追加しますbase.html

{% load static %}
<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
    <!-- Font awesome -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <!-- custom css & js -->
    <link rel="stylesheet" href="{% static 'style.css' %}">
    <script src="{% static 'main.js' %}" defer></script>

    <script src="https://rawgit.com/enyo/dropzone/master/dist/dropzone.js"></script>
    <link rel="stylesheet" href="https://rawgit.com/enyo/dropzone/master/dist/dropzone.css">


    <title>Drag and Drop Django| {% block title %}{% endblock title %}</title>
  </head>
  <body>
    <div class="container mt-3">
        {% block content %}
        {% endblock content %}
    </div>

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
  </body>
</html>

そして以下のindex.html :

{% extends 'base.html' %}

{%block content%}
<h6>UPLOAD MULTIPLE IMAGES NOW</h6>
<br>
<form enctype='multipart/form-data' action="upload/" method='POST' class="dropzone dz" id="my-dropzone" >
    {% csrf_token %}
    <div class="fallback">
      <input name="file" type="file" multiple />
    </div>
</form>
{%endblock%}

サーバーをスピン

では端末に行き、

python manage.py runserver

ブラウザをチェックし、画像をアップロードし、複数を選択してください.

and

ミッション

この記事のためにそれをするべきであるはい.私の会社とコーディングを維持していただきありがとうございます.このプロジェクトのソースコードを取得できますhere
あなたと私と接続することができます
応援して、次回お会いしましょう!

Reference

この問題について(あなたのDjangoアプリで同時に複数の画像をアップロードする), 我々は、より多くの情報をここで見つけました https://dev.to/nick_langat/upload-multiple-images-simultaneously-in-your-django-app-using-dropzone-js-11pi

テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。

Collection and Share based on the CC Protocol

[C++プログラミングとSTL]アルゴリズム

MVC Controller指定されたパスのファイルをダウンロード