file upload

Unterstützt die Komponente zum Hochladen von Dateien

• Werden Sie Sponsor auf Patreon.
• Einmalige Spende über Kryptowährungen.

Einführung

Suchen Sie nach einer einfachen Möglichkeit, Dateien hochzuladen, dann ist dies genau das Richtige für Sie.

Dies ist eine Vue-Komponente zum Hochladen von Dateien mit Ajax. Es enthält erstaunliche Funktionen, die Sie problemlos und ohne Komplexität verwenden können.

Merkmale

• Vorschau der Dateien vor dem Hochladen
• Hochladen mehrerer Dateien
• Dateien per Drag-and-Drop verschieben
• Laden Sie mehrere Dateien gleichzeitig hoch
• Löschen/Alle löschen
• Abbrechen/Alle abbrechen
• Chunk-Upload

Offizielle Dokumentation

Die Dokumentation zum Datei-Upload finden Sie hier

Demo

Datei-Upload-Demo

Anforderungen

• Rückenwind => 3.*
• Axios => 2.2.17*

Installation

Um die Komponente zu installieren und einzurichten, befolgen wir einige Schritte:

Schritt 1

npm install ` @yazan.alnughnugh/file-upload 

Schritt 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' ) ; 

Verwendung

Um mit der Verwendung der Komponente zu beginnen, fügen wir Ihrer Blade-Datei eine Komponente mit drei Requisiten hinzu:

url ist die URL, an die Sie eine Anfrage senden möchten.

id wenn Sie die Modell-ID mit der Anfrage senden möchten,

label Hier können Sie Ihre Beschreibung hinzufügen.

// resources/posts/create.blade.php

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

Anfrage

Die Anfrage ist die gleiche wie unten: Die Dateien werden einzeln gesendet, eine Anfrage für jede Datei.

 // resources/posts/create.blade.php

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

Konfiguration

Name	Typ	Standard	Beschreibung
url	Zeichenfolge	„/“	ist die URL, an die Sie eine Anfrage senden möchten
id	Nummer	null	wenn Sie die Modell-ID mit der Anfrage senden möchten
label	Zeichenfolge	„PNG, JPG, GIF bis zu 10 MB“	Hier können Sie Ihre Beschreibung hinzufügen