ILLA home page
  1. Last opp

Last opp komponenten brukes til å tillate brukere å laste opp filer fra deres lokale maskiner til en hvilken som helst sky-lagring via API. Neste, vi vil introdusere hvordan vi konfigurerer en laste opp komponent, hvordan å knytte opplastingskomponenten til en skylagringstjeneste. hvordan bruke opplastingskomponenten for å velge et bilde og vise det med et bilde osv.

Egenskaper

EgenskapBeskrivelse
Type:Angi typen opplastingskomponent, inkludert knapp og Dropzone. (Automatic Translation)
TekstTeksten som vises på opplastings-komponenten.
Utvalg typerAngi valgtypen til flere filer, én fil eller katalog. (Automatic Translation)
Fil typerEn liste over filendelser har lov til å laste opp. Ingen verdi vil tillate alle filtyper.
Legg til nylig valgte filerHvis du vil angi valgt ny fil til å legge til den valgte filen, eller erstatte den valgte filen i valgt type filer eller mappe.
Liste over filerHvis du vil vise en liste over valgte filer under opplastingskomponenten. (Automatic Translation) Høyden på opplastingen vil endres dynamisk basert på lengden av fillisten.
Analysere verdiForsøk på å analysere valgte filer, med støtte for JSON, CSV, TSV, Excel, og TXT filer. Analyserte data kan nås via {{upload1.parsedValue}}. Filer som ikke kan analyseres er null i listen. Alle filer er tilgjengelige som base64 kodet strenger av verdi, uavhengig av dette alternativet.
LasterOm komponenten skal vise en belastningsindikator.
DeaktivertFor å angi om denne komponenten skal deaktivere og under hvilke betingelser den skal deaktiveres. For eksempel bør denne komponenten hvis inngangs-1 komponenten er null, deaktiveres: {{ input1.value =‘ ’}}
VerktøytipsEt verktøytips vises på komponenten når brukerne holder over komponenten.
Obligatorisk feltFor å angi om det er påkrevd.
Min sizeFor å angi minimum filstørrelse som skal legges til.
Max sizeFor å angi maksimal filstørrelse som skal legges til.
Egendefinert regelFor å angi teksten som vises når verifiseringen feiler.
Skjul valideringsmeldingFor å angi om valideringsmeldingen skal vises når verifiseringen mislykkes
Skjema DatastøkkelHvis du vil sette en nøkkel for komponenten. Etter å ha lagt denne komponenten til et skjema vil denne nøkkelen bli brukt til å identifisere dataene til denne komponenten når du sender skjemaet.
HiddenAngir om denne komponenten skal vises og under hvilke betingelser den skal vises. Hvis gjeldende bruker ikke er bruker A, bør denne komponenten skjules: {{ currentUserInfo.nickname != ‘User A’ }}
VariantHvis du vil sette en knapp, last opp en komponent til Outline eller Filled.
Tema fargeHvis du vil angi fargen på knappen Last opp komponenten.

Metode

Du kan bruke andre komponenter til å kontrollere opplastings-komponenten. Følgende tre metoder støtter vi:

klareringBrukes til å fjerne valideringsmeldingen
klar verdiBrukes til å tømme valgte
DeaktivertBrukes til å angi opplastingskomponenten til deaktivert eller aktivert

Arrangement behandler

Hvis du vil utløse handlinger når valgte filer endres

Data av opplaster

Opplastingskomponenten har noen vanlig brukte data, som kan kalles i appen.

«verdi» en liste som består av filenes base64-data.

‘filer’ en liste med objekter. Nøklene til objektene inneholder lastModifisert, navn, størrelse, type. Du kan bruke {{upload1.files.map(fil =>file. ame)}} for å få en liste med filnavn og du kan også bli sist modifisert matrise, størrelse matrise, type matrise på samme måte.

Last opp filer til en sky-lagringstjeneste

Last opp en enkelt fil gjennom en S3-ressurs

Konfigurasjonen til handlingen er som følger:

Last opp objektnavn

{{upload1.files.map(file =>file.name)[0]}}

Laste opp data

{{upload1.value[0]}}

Laste opp flere filer gjennom en S3-ressurs

Laste opp navn på objekter

{{upload1.files.map(file =>file.name)}}

Laste opp dataliste

{{upload1.value}}

Last opp et bilde og vis det på bilde-komponenten Endre bildekilden til filens base64 data for opplastede komponenter. Base64 data er lagret i verdiattributtet i listen. Og vi skal sette filprefikset ut med fildataene. Koden er som følger.

{{'data:image/jpeg;base64,'+upload1.value[0]}}