20 Upload-Komponenten-Beispiele mit Vue.js

Blog

20 Upload-Komponenten-Beispiele mit Vue.js

1.Rokka-Uploader-Ansicht

Eine kleine Bild-Uploader-Komponente für Vue. Vue-Komponente zum Hochladen von Bildern rokka.io https://rokka.io



Es verwendet vue-upload-Komponente .

Rokka-Uploader ansehen



Auf Github ansehen

2.Vux-Uploader-Komponente

eine mobile vue-Komponentenimplementierung für den weui-Uploader.



Vux-Uploader-Komponente

Demo: https://ejayyoung.github.io/vux-uploader-component/index.html

Erstellen Sie Ihr eigenes Tarnmuster

Auf Github ansehen

3.aammui Dateiuploader

Es ist ein vue js-Dateiuploader-Plugin, das speziell für Laravel entwickelt wurde, um mehrere Datei-Uploads zu verarbeiten.

aammui Dateiuploader

Auf Github ansehen

4. Bildansicht zum Hochladen zuschneiden

Eine schöne Vue-Komponente zum Zuschneiden und Hochladen von Bildern.

Hinweis: Diese Komponente ist für PCs konzipiert und wird nicht für die Verwendung auf der mobilen Seite empfohlen.

Bildansicht zum Hochladen zuschneiden

Demo: https://dai-siki.github.io/vue-image-crop-upload/example-2/demo.html

Auf Github ansehen

5.Vue Bild hochladen und Größe ändern

Eine Vue.js-Plug-in-Komponente für den clientseitigen Bild-Upload mit optionaler Größenänderung und Exif-basierter Autorotation.

Dieses Plugin wurde für die Verwendung in einem Webapp-Szenario entwickelt, in dem eine große Anzahl von Endbenutzern Kamerafotos von ihren mobilen Geräten mit teilweise günstigen Datentarifen hochgeladen hat. Der primäre Zweck ist daher die clientseitige Größenänderung und bei Bedarf die Exif-basierte Autorotation. Es kann aber auch einfach als Datei-Upload-Komponente verwendet werden.

Basierend auf [ImageUploader] ( https://github.com/rossturner/HTML5-ImageUploader ) von Ross Turner. Das Plugin nutzt eine optionale Abhängigkeit JavaScript-Canvas zu Blob (für Blob-Ausgabe).

Vue-Bild hochladen und skalieren
Demo: https://codesandbox.io/s/mqnow97omj?module=/src/components/HelloWorld.vue

Auf Github ansehen

6.Ansicht und Geovereinfachung

Laden Sie Ihre Geojson-Geometrie hoch und vereinfachen Sie sie.

Sie können Ihr Geojson einfügen oder eine gültige Geojson-Datei hochladen und deren Geometrie vereinfachen.

Vue und Geo vereinfachen

Demo

Auf Github ansehen

7.Mehrere Bild-Upload-Ansicht

Eine einfache Komponente zum Hochladen mehrerer Bilder für Vuejs.

Bildsegmentierung k bedeutet

Ansicht für mehrere Bilder hochladen

Demo: https://codepen.io/lekhang2512/pen/qJmQaZ

Auf Github ansehen

8.v Datei-Upload

Datei-Upload-Komponente für Vue.js

v Datei-Upload

Demo: http://dflourusso.github.io/v-file-upload

Auf Github ansehen

9.Vuetify-Upload-Button

Eine Vue-Komponente für Vuetify.

Diese Komponente ist eine Datei-Upload-Eingabe mit der Basisfunktionalität einer Vuetify-Schaltfläche.
Vuetify-Upload-Button

Auf Github ansehen

10.v-Uploader

Ein Vue2-Plugin macht das Hochladen von Dateien einfach und einfacher, Einzeldatei-Upload mit Bildvorschau, Mehrfach-Upload mit Drag & Drop https://terryz.github.io/vue/#/upload

V-Uploader

Auf Github ansehen

11.FilePond-Ansicht

Eine praktische FilePond-Adapterkomponente für Vue https://pqina.nl/filepond

Vue FilePond ist eine praktische Adapterkomponente für FilePond, eine JavaScript-Bibliothek, die alles hochladen kann, was Sie darauf werfen, Bilder für schnellere Uploads optimiert und eine großartige, zugängliche, seidig glatte Benutzererfahrung bietet.

FilePond-Ansicht

Kernfunktionen

  • Akzeptiert Verzeichnisse, Dateien, Blobs, lokale URLs, Remote-URLs und Daten-URIs.
  • Legen Sie Dateien ab, wählen Sie im Dateisystem aus, kopieren Sie Dateien und fügen Sie sie ein oder fügen Sie Dateien mithilfe der API hinzu.
  • Asynchrones Hochladen mit AJAX oder codieren Sie Dateien als base64-Daten und senden Sie sie als Formularpost.
  • Zugänglich, getestet mit AT-Software wie VoiceOver und JAWS, navigierbar über Tastatur.
  • Bildoptimierung, automatische Bildgrößenanpassung, Zuschneiden und fixiert die EXIF-Ausrichtung.
  • Responsive, passt sich automatisch dem verfügbaren Platz an und funktioniert sowohl auf mobilen als auch auf Desktop-Geräten.

Auf Github ansehen

12.Dropzone-Ansicht

CO-MAINTAINER GESUCHT Diese Komponente hat meine anfänglichen Erwartungen bei weitem übertroffen und ich kann nicht den Support bieten, den die Benutzer benötigen. Wenn Sie bei der Wartung helfen möchten, schreiben Sie eine Notiz zu diesem Problem

Eine Vue-Komponente für Datei-Uploads, unterstützt von Dropzone.js. Schauen Sie sich die Demo an .

CSS-Layout-Generator

Eine Nuxt SSR-kompatible Komponente finden Sie unter npm und github. Danke an @Etheryte

Dropzone-Ansicht

Auf Github ansehen

13.Vue2 Multi-Uploader

Einfache Datei-Upload-Komponente für Vue.js https://saivarunk.github.io/vue-simple-upload/

Vue2 Multi-Uploader

Checkout Demo an JSFiddle

Auf Github ansehen

14.Clipansicht

Vue Clip ist ein minimalistischer und hackbarer Datei-Uploader für VueJs. Ich habe dieses Plugin geschrieben, weil es keine gut geschriebenen Datei-Uploader mit fein abgestimmten Steuerelementen gibt.

Clip-Ansicht

Merkmale

  • Geschrieben in Vanille Javascript.
  • Wiegt 17,9 KB (verkleinert und Gzip), 57 KB (verkleinert).
  • Mit benutzerdefinierten Ereignissen bis ins Mark hackbar.
  • Verschmutzt DOM nicht durch das Hinzufügen von unnötigem Markup. Tatsächlich erstellt die Komponente ein einzelnes div-Element.

Auf Github ansehen

15.Eine einfache Datei-Upload-Komponente für vue

Eine Datei-Upload-Komponente für vuejs.
Eine einfache Datei-Upload-Komponente für vue
Demo: http://dai-siki.github.io/vue-upload-file/example/demo.html

Auf Github ansehen

16. Komponentenansicht hochladen

Eine einfache Datei-Upload-Komponente für vue
Vue.js-Datei-Upload-Komponente, Unterstützung für mehrere Datei-Uploads, Fortschritt, html4, ie9 Html4 unterstützt nicht den Fortschrittsbalken, Dateigröße, Akzeptieren, Timeout, Header, Antwortstatuscode Fehler der Beurteilung

Komponentenansicht hochladen

Auf Github ansehen

17.Instagram-Filter Rapid Prototyp

Schneller Prototyp der Instagram-Filterauswahl UX.

Gebaut mit: Vue, Tachyonen, CSSgram, Flickity.

18.Core-Image-Upload anzeigen

ein Vue-Plugin zum Hochladen und Zuschneiden von Bildern (Unterstützung: iPhone: IE9+)

Ansicht zum Hochladen von Kernbildern

Auf Github ansehen

19.Magisches Bild hochladen

Magic Upload Image Base auf Vue.js Support Einfügen, Drag-Drop, Formular – Github-Probleme wie http://upload.leanapp.cn/

Magisches Bild hochladen

Auf Github ansehen

20.Datei-Upload-Komponentenansicht

Eine einfache Datei-Upload-Komponente für Vue.js. Gibt Ereignisse für den XHR-Upload-Fortschritt für schöne Fortschrittsbalken aus.

Die ursprüngliche Idee kam mir beim Anschauen dieses Repository . Ich wusste, dass ich eine schöne Komponente mit Upload-Fortschritt wollte und habe daher etwas Code aus dieser Bibliothek kopiert.

Ansicht der Datei-Upload-Komponente

Auf Github ansehen

reddit beste Streams nba

#vuejs #javascript #vue-js