So verwenden Sie die Vux-Uploader-Bild-Upload-Komponente

Dieses Mal zeige ich Ihnen, wie Sie die Vux-Uploader-Bild-Upload-Komponente verwenden und welche Vorsichtsmaßnahmen bei der Verwendung der Vux-Uploader-Bild-Upload-Komponente gelten. Hier ist ein praktischer Fall, schauen wir uns das an.

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. Verwenden Sie

// 引入组件
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: Belassen 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 des Bildes wird standardmäßig der Formularname verwendet
Bemerkungen: Keine
params
Typ: Objekt
Standardwert: null
Bedeutung: Carry-Parameter
beim Hochladen von Dateien Anmerkungen: Keine
Größe
Typ: String
Standardwert: normal
Bedeutung: size Typ
Hinweis: normal ist die Standardgröße von weui, klein ist die kleinere, vom Autor definierte Größe
capture
Typ: String
Standardwert: ''
Bedeutung: Eingabeerfassung Attribut
Hinweis: Es kann auf die Schaltfläche „Hinzufügen“ eingestellt werden, und einige Modelle aktivieren die Kamera direkt Da die Funktionsweise jedes Mobiltelefonmodells unterschiedlich ist, verwenden Sie es 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:

Detaillierte Analyse des WeChat-Applet-Einführungs-Tutorials + Fallstudie

So verwenden Sie den http-Server in AngularJS

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