L'histoire de l'affichage des fichiers multimédias dans Django

Comment afficher les fichiers multimédias dans Django

Tout d'abord, cela ressemble à ceci d'accepter l'enregistrement de fichiers sur le service Web.

Enregistrement de fichier ↓ Affichage des fichiers

En particulier, Django a une classe appelée ** File Field **, qui est dédiée à la sauvegarde des fichiers. Parce qu'il existe des classes appelées ** formulaire de téléchargement ** et ** modèle ** Je pense que c'est assez facile à faire.

Comme il est difficile d'écrire du côté du téléchargement, il peut être acceptable d'écrire un document officiel. (Télécharger le fichier) En gros, ça ressemble à ça

Tout d'abord, pour définir le fichier multimédia Définit le répertoire racine des fichiers multimédias.

Paramètres du serveur. Paramètres Django et Nginx

Réglez setting.py comme d'habitude.

setting.py

BASE_DIR = os.path.dirname(os.path.dirname(os.path.abspath(__file__)))

MEDIA_ROOT = os.path.join(BASE_DIR, 'media')   #← Ajouter ceci
MEDIA_URL = '/media/'

BASE_DIR est deux au-dessus de setting.py, c'est-à-dire le répertoire racine de l'application avec ** manage.py **. Cela signifie que. Par conséquent, le répertoire racine du fichier multimédia est défini sur le répertoire multimédia ** dans le même répertoire que ** manage.py. Et l'URL pour accéder au fichier multimédia est définie sur ** / media / **.

En fait, dans cet état, même si le côté Django est OK, le côté Nginx qui reçoit l'accès Parce que j'obtiens une erreur telle que "Le fichier est trop gros!"

Je vous enverrai un gros fichier image. Je dois écrire le décor. Ouvrons le fichier de paramètres

% sudo vim /etc/nginx/conf.d/site.conf $Emplacement des paramètres Nginx pour Ubuntu. Pour la secte CentOS, essayez un autre fichier

site.conf

server {
   listen  80;
   listen [::]:80;
   server_name sample;
   client_max_body_size 20M; #ajouter à. La taille maximale de la transmission des demandes est de 20 Mo

   location /static {
       alias /home/Nom d'utilisateur que vous avez défini/Racine de l'application/static;
   }

   location /media {　 #ajouter à. Définir le fichier multimédia et l'URL
       alias /home/Nom d'utilisateur que vous avez défini/Racine de l'application/media;
   }

   location / {
       proxy_pass http://127.0.0.1:8000;
    }
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
       proxy_set_header Host $http_host;
       proxy_redirect off;
       proxy_set_header X-Forwarded-Proto $scheme;
}

Assurons-nous que cet emplacement et la racine du média de Django pointent vers le même emplacement comme celui-ci (^-^)

Ceci termine les paramètres du serveur!

Comment utiliser la fonction de téléchargement

C'est ennuyeux, alors je vais le décomposer et expliquer (´ ・ ω ・ ｀) Le champ de fichier est utilisé en l'incorporant dans le modèle comme ceci.

fileModel.py

from django.core.validators import FileExtensionValidator
from django.db import models

'''
Modèle d'image
@author Nozawa
'''
class Picture(models.Model):
    id = models.BigAutoField(primary_key=True,unique=True)
    name = models.CharField(max_length=200)
    image = models.FileField(upload_to='upload_pict/%Y/%m/%d/',
                             verbose_name='Image téléchargée',
                             validators=[FileExtensionValidator(['jpg','png','gif', ])],
                             ) #upload_Sélectionnez le répertoire de destination de l'enregistrement avec pour sélectionner l'extension avec les validateurs. Verbeux_Définir comment afficher sur l'écran de gestion avec le nom
    uploader = models.CharField(max_length=200)
    uploadDate = models.DateField()
    updateDate = models.DateField()
    deleteFlg = models.BooleanField()

    def __str__(self):
        return '<Picture:id' + str(self.id) + ', ' + \
            self.name + '(' + str(self.uploader) + ')>'

Le formulaire de téléchargement est utilisé comme ceci.

PictUploadForm.py

'''
Modèle de formulaire pour le téléchargement d'images
'''
class PictUploadForm(forms.ModelForm):
    class Meta:
        model = Picture
        fields = ['name', 'image']

pictureService.py

    def createPicutre(self, request):
        pict:PictUploadForm = PictUploadForm(request.POST, request.FILES, instance=pictObj)
        pict.errors
        if pict.is_valid():
        #Vérifiez si la valeur est correcte(Validation)
            pict.save()
            #Enregistrer la valeur dans DB

En fait, le formulaire de téléchargement est une fonction qui omet la manière originale d'écrire un téléchargement de fichier. Le formulaire de téléchargement se fait en entrant l'instance de modèle et la demande. ** Une classe pratique qui définit automatiquement les valeurs du modèle **!

À l'origine, comme le dit le document officiel, il est écrit comme ceci

sample.py

            instance = ModelWithFileField(file_field=request.FILES['file'])　#Le nom du champ est spécifié dans le constructeur et défini.
            instance.save()

Enfin, l'écran d'affichage du côté du téléchargement sera affiché.

UploadView.py

class UploadView(TemplateView):
    #Processus d'initialisation
    def __init__(self):
        self.params = {
            'form': PictUploadForm.PictUploadForm(),
        }
    #Afficher le formulaire d'image
    def get(self, request):
        #Objet image de remplacement
        return render(request, 'memFrame/Écran de téléchargement.html', self.params)

Écran de téléchargement.html

<form action="{% url 'pictUpload' %}" method="post" enctype="multipart/form-data"> <!--Configurer plusieurs parties et préparer le téléchargement de fichiers-->
    {% csrf_token %}
    {{ form.name }}
    {{ form.image }}
    <tr>
        <td>
            <input type="submit" value="Importer des images!"/>
        </td>
    </tr>
</form>

Comment utiliser la fonction d'affichage

ViewingView.py

class ViewingView(TemplateView):
    #Classe de service d'image
    pictService:PictService = PictService.PictService()
    #Afficher le formulaire d'image
    def get(self, request):
        #Objet image de remplacement
        pictList:list = self.pictService.findAll()
        self.params = {
            'picts':pictList,
        }

        print(pictList)

        return render(request, 'myapplication/Écran d'affichage.html', self.params)

Écran d'affichage.html

{% for pict in picts %}
    <h2>{{ pict.name }}</h2>
    <img src='{{pict.image.url}}' width=200>　#Spécifiez l'URL du champ de fichier dans la balise d'image
{% endfor %}

résultat

J'ai pu afficher l'image téléchargée ヾ (.> ﹏ <.) ﾉ ✧ *.