Implementieren einer Bild-Upload-Komponente

Diese Beispielkomponente wird als Upload-Schaltfläche gerendert, um das Bild und ein Standardbild hochzuladen, wenn die Komponente zum ersten Mal geladen wird. Wenn Sie auf Upload klicken, wird ein Dateiexplorer geöffnet, in dem das Bild ausgewählt werden kann.

Das ausgewählte Bild wird innerhalb der Komponente gerendert. Auch wird die Remove-Schaltfläche angezeigt, wenn wir zurücksetzen müssen. Wenn Sie auf die Schaltfläche Remove klicken, wird das Standardbild angezeigt.

Verfügbar für

Modellgesteuerte Apps

Code

Sie können die komplette Beispielkomponente hier herunterladen.

Dieses Beispiel veranschaulicht, wie Sie eine Bild-Auswahl erstellen, und demonstriert die im Manifest definierten Geräte-API und Ressourcen-API zum Laden des Bilds. Der Bildinhalt wird in Base64-Verschlüsselung gespeichert und kann gespeichert und erneut genutzt werden.

Die resources.getResource-Methode übernimmt die Eingabe als Namen für die Webressource, der im Komponentenmanifest definiert, ist und lädt die Webressource. Die Komponente wird eine Upload-Schaltfläche und das Standardbild für das erste Rendering rendern. Bilder werden im Ressource-Knoten des Manifests definiert.

    <resources>
      <code path="index.ts" order="1" />
       <css path="css/TS_ImageUploadControl.css" order="1" />
      <img path="img/default.png" />
      <resx path="strings/TSImageUploadControl.1033.resx" version="1.0.0" />
    </resources>

Das successCallback wird ausgelöst und der Ressourceninhalt wird in successCallback eingebracht. Verwenden Sie dann das Bildelement 'src', das auf den Inhalt weist und das Standardbild wird geladen.

Die device.pickFile-Methode öffnet ein Dialogfeld, um Dateien für den Upload auszuwählen. Beim Desktop öffnet sich der Dateiexplorer, bei mobilen Clients öffnet sich die Bibliothek des Fotos. Wenn Sie auf die Schaltfläche  upload klicken, wird die Geräte-API- pickFile ausgelöst und der Benutzer wählt die Datei aus. Nachdem die Datei erfolgreich ausgewählt ist, werden der Dateiname, Dateiinhalt der Datei in successCallback eingebracht.

Hinweis

Wenn dasselbe Formular oder dieselbe Tabelle auf dem veralteten Web-Client verwendet wird, dann zeigt das Feld auf dem veralteten Client eine Out-of-Box-Textkomponente an, bei der es zu UX-Problemen kommen kann.  Damit dies im Vorgänger-Webclient ausgeblendet wird, könnten wir das Sichtbarkeit-Kontrollkästchen deaktivieren und das Kontrollkästchen Standardsteuerelement ausblenden zusammen aktivieren.

Verwandte Themen

Beispielkomponenten herunterladen
Beispielkomponenten verwenden
Geräte-API-Komponente
Geräte-API
Power Apps component framework-API-Referenz
Power Apps Component Framework-Manifestschema-Referenz

Hinweis

Können Sie uns Ihre Präferenzen für die Dokumentationssprache mitteilen? Nehmen Sie an einer kurzen Umfrage teil. (Beachten Sie, dass diese Umfrage auf Englisch ist.)

Die Umfrage dauert etwa sieben Minuten. Es werden keine personenbezogenen Daten erhoben. (Datenschutzbestimmungen).