file upload

Prise en charge du composant de téléchargement de fichier

• Devenez sponsor sur Patreon.
• Don unique via crypto-monnaies.

Introduction

Cherchez-vous un moyen simple de télécharger des fichiers, c'est ce que vous recherchez.

Il s'agit d'un composant vue permettant de télécharger des fichiers à l'aide d'ajax. Il contient des fonctionnalités étonnantes, vous pouvez l’utiliser facilement sans aucune complexité.

Caractéristiques

• Prévisualiser les fichiers avant de les télécharger
• Téléchargement multi-fichiers
• Glisser et déposer des fichiers
• Téléchargez plusieurs fichiers en même temps
• Supprimer/Supprimer tout
• Annuler/Tout annuler
• Téléchargement de fragments

Documentation officielle

La documentation pour le téléchargement de fichiers peut être trouvée ici

Démo

Démo de téléchargement de fichiers

Exigences

• Vent arrière => 3.*
• Axios => 2.2.17*

Installation

Pour installer et configurer le composant, nous suivrons quelques étapes :

étape 1

npm install ` @yazan.alnughnugh/file-upload 

étape 2

Vue 2

 // app/resources/js/app.js

 Vue . component ( 'file-upload' , require ( '@yazan.alnughnugh/file-upload' ) . default ) ;

Vue 3

 // app/resources/js/app.js
 import FileUpload from '@yazan.alnughnugh/file-upload' ;

 const app = createApp ( options ) ;

 app . component ( 'file-upload' , FileUpload ) ;
 app . mount ( '#app' ) ; 

Usage

Pour commencer à utiliser le composant, nous ajouterons un composant à votre fichier blade avec trois accessoires,

url est l'url à laquelle vous souhaitez lui envoyer une requête,

id si vous souhaitez envoyer l'identifiant du modèle avec demande,

label ici, vous pouvez ajouter votre description.

// resources/posts/create.blade.php

  < file-upload :url =" url " :id =" id " :label =" label " > </ file-upload > 

Demande

La demande sera la même que ci-dessous, les fichiers seront envoyés un par un, une demande pour chaque fichier.

 // resources/posts/create.blade.php

  [
    " id " => " 9 " , // if you added id
    " file " => File , // this is our file
  ] ;   

Configuration

Nom	Taper	Défaut	Description
url	Chaîne	"/"	est l'URL à laquelle vous souhaitez lui envoyer une demande
id	Nombre	nul	si vous souhaitez envoyer l'identifiant du modèle avec demande
label	Chaîne	« PNG, JPG, GIF jusqu'à 10 Mo »	ici vous pouvez ajouter votre description