Übung – Hochladen von Benutzerdateien

8 Minuten

Dies sind die Schritte, um ein Upload-Feature zu Ihrer App hinzuzufügen.

Anzeigen eines Browser-Dateieingabeelements

Öffnen Sie Pages/Files.cshtml in Ihrem Code-Editor.
Suchen Sie das bestehende form-Element. Wie Sie feststellen werden, enthält es ein Dateieingabesteuerelement. Die Eingabe hat einen asp-for-Wert von UploadedFile.
```
<form method="post" enctype="multipart/form-data">
  <input asp-for="UploadedFile" type="file">
  <input type="submit" value="Upload File">
</form>
```
Öffnen Sie Pages/Files.cshtml.cs in Ihrem Code-Editor.
Die von einem Benutzer hochgeladene Datei wird einer Eigenschaft in der FilesModel-Klasse mit dem Namen UploadedFile zugewiesen.

Suchen Sie die OnPostAsync()-Methode, und ersetzen Sie den vorhandenen Code durch den folgenden Code, um das Kopieren der hochgeladenen Datei in einen MemoryStream zu verarbeiten. Nachdem der Datenstrom erstellt wurde, wird er an die _graphFilesClient.UploadFile()-Methode übergeben.

if (UploadedFile == null || UploadedFile.Length == 0)
{
  return;
}

_logger.LogInformation($"Uploading {UploadedFile.FileName}.");

using (var stream = new MemoryStream()) {
  await UploadedFile.CopyToAsync(stream);
  await _graphFilesClient.UploadFile(
  UploadedFile.FileName, stream);
}

await OnGetAsync();

Speichern Sie die Datei Files.cshtml.cs, bevor Sie fortfahren.

Unterstützung für das Hochladen großer Dateien hinzufügen

Öffnen Sie Graph/GraphFilesClient.cs in Ihrem Code-Editor.
Suchen Sie die UploadFile()-Methode. Sie werden feststellen, dass sie die folgenden Aufgaben verarbeitet:
- Die Größe der hochgeladenen Datei wird bestimmt.
- Wenn die Datei größer als 4 MB ist, wird eine Methode mit dem Namen UploadLargeFile() aufgerufen.
- Wenn die Datei kleiner als 4 MB ist, wird eine PUT-Anforderung zum Hochladen der Datei gestellt.
Suchen Sie die UploadLargeFile()-Methode. Sie akzeptiert einen Elementpfad und den Dateidatenstrom, die als Parameter hochgeladen werden. Außerdem wird ein DriveItemUploadableProperties-Objekt erstellt, welches das Ersetzen von Dateien während des Uploadvorgangs verarbeitet, wenn sie bereits in OneDrive vorhanden sind.

Suchen Sie den Create the upload session-Kommentar. Fügen Sie den folgenden Code unmittelbar vor dem Kommentar ein:

var uploadSession = await _graphServiceClient.Me.Drive.Root
    .ItemWithPath(itemPath)
    .CreateUploadSession(uploadProps)
    .Request()
    .PostAsync();

// Max slice size must be a multiple of 320 KiB
int maxSliceSize = 320 * 1024;
var fileUploadTask = new LargeFileUploadTask<DriveItem>(uploadSession, stream, maxSliceSize);

// Create a callback that is invoked after
// each slice is uploaded
IProgress<long> progress = new Progress<long>(prog =>
{
  _logger.LogInformation($"Uploaded {prog} bytes of {stream.Length} bytes");
});

Durch diesen Code wird Folgendes ausgeführt:

Erstellen einer Uploadsitzung
Erstellen eines LargeFileUploadTask-Objekts und Übergabe der Uploadsitzung, des hochzuladenden Datenstroms und der maximalen Segmentgröße an das Objekt
Erstellen eines großen Progress-Dateiuploadobjekts, das Informationen zum Uploadprozess protokolliert

Suchen Sie den try-Block, und ersetzen Sie den vorhandenen durch den folgenden Code:

// Upload the file
var uploadResult = await fileUploadTask.UploadAsync(progress);

if (uploadResult.UploadSucceeded)
{
    _logger.LogInformation($"Upload complete, item ID: { uploadResult.ItemResponse.Id}");
}
else
{
    _logger.LogInformation("Upload failed");
}

Durch diesen Code wird der Uploadvorgang für große Dateien gestartet und Informationen zum Erfolg oder Fehler protokolliert.

Speichern Sie die Datei GraphFilesClient.cs, bevor Sie fortfahren.

Ausführen Ihrer App

Es ist an der Zeit, Ihre Anwendung auszuführen und eine Datei hochzuladen!

Führen Sie den folgenden Schritt je nach verwendetem Code-Editor aus:
- Visual Studio
  
  Drücken Sie die F5-TASTE, um das Projekt zu erstellen und auszuführen.
- Visual Studio Code oder einen anderen Code-Editor
  
  Öffnen Sie im Ordner Begin ein Terminalfenster und führen Sie den folgenden Befehl aus:
```
dotnet run
```
Öffnen Sie einen Browser, und navigieren Sie zu https://localhost:5001.
Melden Sie sich mit dem Microsoft 365-Entwicklermandanten an, den Sie zuvor bei der Registrierung der Microsoft Entra-Anwendung verwendet haben.
Klicken Sie auf den Link Dateien im Header, um die OneDrive-Dateien des Benutzers anzuzeigen.
Klicken Sie auf die Schaltfläche Datei auswählen, und wählen Sie eine Datei auf Ihrem Computer aus, die Sie hochladen möchten.
Klicken Sie auf die Schaltfläche Datei hochladen, um den Uploadvorgang zu starten. Nachdem der Dateiupload abgeschlossen ist, wird die Datei auf der Seite aufgeführt.

Hinweis

Wenn die Dateigröße 4 MB überschreitet, wechseln Sie zum aktiven Terminalfenster. Der Status der hochgeladenen Datei wird angezeigt. Nach Abschluss des Uploads wird ein Element-ID-Wert im Terminalfenster ausgegeben, und der Dateiname wird im Browser angezeigt.
Schließen Sie Ihren Browser, und drücken Sie STRG+C im Terminalfenster, um den Server zu beenden, bevor Sie fortfahren.

Hinweis

Wenn Sie das Projekt in Visual Studio geöffnet haben, können Sie den Browser schließen, oder UMSCHALT+F5 in Visual Studio auswählen, um den Server zu beenden. Schließen Sie das von Visual Studio erstellte Terminalfenster, falls es noch geöffnet ist.

Übung – Hochladen von Benutzerdateien

Anzeigen eines Browser-Dateieingabeelements

Unterstützung für das Hochladen großer Dateien hinzufügen

Ausführen Ihrer App

Feedback