Tutorial zur Verwendung der Vux-Uploader-Bild-Upload-Komponente

Dieses Mal bringe ich Ihnen ein Tutorial zur Verwendung der Vux-Uploader-Bild-Upload-Komponente. Was sind die Vorsichtsmaßnahmen bei der Verwendung der Vux-Uploader-Bild-Upload-Komponente? sehen.

1. Website: https://github.com/greedying/vux-uploader

2. Installieren Sie

npm install vux-uploader --save
npm install --save-dev babel-preset-es2015 
.babelrc
{
 "presets": [
  ["env", {
   "modules": false,
   "targets": {
    "browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
   }
  }],
  "es2015",
  "stage-2"
 ],
 "plugins": ["transform-runtime"],
 "env": {
  "test": {
   "presets": ["env", "es2015", "stage-2"],
   "plugins": ["istanbul"]
  }
 }
}

3. Verwendung von

// 引入组件
import Uploader from 'vux-uploader'
// 子组件
export default {
 ...
 components: {
  ...
  Uploader,
  ...
 }
 ...
}
// 使用组件
<uploader
 :max="varmax"
 :images="images"
 :handle-click="true"
 :show-header="false"
 :readonly="true"
 :upload-url="uploadUrl"
 name="img"
 :params="params"
 size="small"
 @preview="previewMethod"
 @add-image="addImageMethod"
 @remove-image="removeImageMethod"
></uploader>

Parameterbeschreibung:

Bilder
Typ: Array
Standardwert: [], leeres Array
Bedeutung: Bildarray, Format ist [ { url: '/url/of/img.ong' }, ...]
Hinweis: Wenn die Variable ein Array ist, ist der Datenfluss bidirektional. Das Ändern des Werts des Arrays innerhalb der Komponente wirkt sich auf die übergeordnete Komponente aus.
max
Typ: Zahl
Standardwert : 1
Bedeutung: Maximale Anzahl von Bildern
Hinweis: Wenn das Bild den Maximalwert erreicht, verschwindet die neue Schaltfläche
showHeader
Typ: Boolean
Standardwert: true
Bedeutung: Ob die Kopfzeile angezeigt werden soll
Anmerkungen: Steuern Sie die Anzeige der gesamten Kopfzeile
Titel
Typ: Zeichenfolge
Standardwert: Bild-Upload
Bedeutung: Titel der Kopfzeile
Hinweis: Verlassen leer, wenn nicht angezeigt
showTip
Typ: Boolean
Standardwert: true
Bedeutung: Ob der digitale Teil des Headers, also der 1/3-Teil, angezeigt werden soll
Hinweis: Wenn showHeader ist false, der Header wird als Ganzes ausgeblendet und dieser Parameter ist zu diesem Zeitpunkt ungültig
readonly
Typ: Boolean
Standardwert: false
Bedeutung: Ob schreibgeschützt
Hinweis: Im schreibgeschützten Zustand sind die Schaltflächen „Hinzufügen“ und „Löschen“ ausgeblendet.
handleClick
Typ: Boolean
Standardwert: false
Bedeutung: Ob das Klickereignis der neuen Schaltfläche übernommen werden soll. Wenn ja, klicken Die neue Schaltfläche wird nicht mehr automatisch in der Bildauswahloberfläche angezeigt.
Hinweis: Wenn dies der Fall ist, klicken Sie auf die neue Schaltfläche und dann auf $emit('add-image'). Anschließend können Sie benutzerdefinierte Vorgänge wie die Auswahl von Bildern innerhalb dieses Ereignisses ausführen dass das Hinzufügen, Hochladen und Löschen von Bildern vom Benutzer übernommen wird
autoUpload
Typ: Boolean
Standardwert: true
Bedeutung: Ob das Bild nach der Auswahl automatisch hochgeladen werden soll. Wenn ja, wird die interne Upload-Schnittstelle aufgerufen. Nein, dann ist $emit('upload-image', formData)', formData` der Bildinhalt, und der Benutzer kann sich das Ereignis anhören und es selbst hochladen
Hinweis: Wenn handleClick true ist, kann keine Bildauswahl durchgeführt werden , daher ist dieser Parameter ungültig. Wenn dieser Parameter falsch ist, ist formData` nach Auswahl des Bildes $emit('upload-image', formData)' der Bildinhalt
uploadUrl
Typ: String
Standardwert: ''
Bedeutung: Erhalten Sie die URL des hochgeladenen Bildes
Hinweis: Sie müssen die JSON--Zeichenfolge im folgenden Format zurückgeben. Andernfalls setzen Sie bitte autoUpload auf „false“ und laden Sie es selbst hoch
{
Ergebnis: 0,
Meldung: „Fehlermeldung, wenn das Ergebnis nicht 0 ist“,
Daten: {
URL: „http://image.url.com/image.png "
}
}
Name
Typ: String
Standardwert: img
Bedeutung: Beim Hochladen wird standardmäßig der Formularname für Bilder verwendet
Anmerkungen: Keine
params
Typ: Objekt
Standardwert: null
Bedeutung: Parameter übertragen
beim Hochladen von Dateien Anmerkungen: Keine
Größe
Typ: String
Standardwert: normal
Bedeutung: Größentyp
Anmerkungen: normal ist die Standardgröße von weui, klein ist die vom Autor definierte kleinere Größe
capture
Typ: String
Standardwert: ''
Bedeutung : Erfassungsattribut der Eingabe
Anmerkungen: Kann auf Kamera eingestellt werden. Klicken Sie zu diesem Zeitpunkt auf die Schaltfläche „Hinzufügen“. Einige Modelle rufen die Kamera direkt auf. Beachten Sie, dass die Leistung jedes Mobiltelefonmodells unterschiedlich ist. Verwenden Sie sie daher bitte mit Vorsicht. Wenn handleClick „true“ ist, ist dieses Attribut ungültig
Ereignisbeschreibung ausgeben
add-image
Timing ausgeben: Wenn der handleClick-Parameter „true“ ist, klicken Sie auf die neue Schaltfläche
Parameter: Keine
Bemerkungen: Keine
remove-image
Emissionszeitpunkt: Wenn der handleClick-Parameter wahr ist, klicken Sie auf die Schaltfläche „Löschen“
Parameter: Keine
Hinweis: Wenn handleClick falsch ist, klicken Sie auf die Schaltfläche „Löschen“ und das erste Bild darin wird gelöscht die Komponente; andernfalls muss der Benutzer dieses Ereignis abhören und den entsprechenden Löschvorgang ausführen
Vorschau
Sendezeit: beim Klicken auf ein beliebiges Bild
Parameter: Bildobjekt im Format { url: 'imgUrl' }
Hinweis: Die automatische Vorschaufunktion wurde vorerst nicht implementiert. Wenn Benutzer Ereignisse überwachen müssen, können sie sie selbst implementieren
upload-image
Timing ausgeben: Wenn sowohl handleClick als auch autoUpload falsch sind `, wählen Sie das Bild aus
Parameter: formData, generiert aus dem Bildinhalt formData
Hinweis: Sie können das Eingabeelement des Bildes über vm.$refs.input erhalten

Ich glaube Sie beherrschen die Methode, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Empfohlene Lektüre:

Ausführliche Erklärung zur Verwendung des $http-Dienstes in AngularJS

Ausführliche Erklärung von Vue addRoutes Schritte zum Implementieren des dynamischen Berechtigungsrouting-Menüs

Das obige ist der detaillierte Inhalt vonTutorial zur Verwendung der Vux-Uploader-Bild-Upload-Komponente. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!