練習 - 上傳使用者檔案

8 分鐘

以下是將上傳功能新增到應用程式的步驟。

顯示瀏覽器檔案輸入元素

在您的程式碼編輯器中開啟 Pages/Files.cshtml。

找出現有的 form 元素, 並請注意它包含檔輸入控制項。輸入的 asp-for 值為 UploadedFile。

<form method="post" enctype="multipart/form-data">
  <input asp-for="UploadedFile" type="file">
  <input type="submit" value="Upload File">
</form>

在您的程式碼編輯器中開啟 Pages/Files.cshtml.cs。
由使用者上傳的此檔案會指派至 FilesModel 類別中的屬性名為 UploadedFile。

找出 OnPostAsync() 方法並以下列程式碼取代現有的程式碼, 以處理將上傳的檔案複製到 MemoryStream。建立資料流後, 它會傳遞給 _graphFilesClient.UploadFile() 方法。

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();

在繼續之前, 請先儲存 Files.cshtml.cs 檔。

新增大型檔案上傳支援

在您的程式碼編輯器中開啟 Graph/GraphFilesClient.cs。
尋找 UploadFile() 方法並注意它會處理下列工作:
- 決定上傳檔案的大小。
- 如果檔案大於 4 MB, 就會對名為 UploadLargeFile() 的方法進行呼叫。
- 如果檔案小於 4 MB, 則會提出 PUT 要求上傳檔案。
找出 UploadLargeFile() 方法。它會接受項目路徑及檔資料流, 以上傳為參數。此外, 它也會建立一個 DriveItemUploadableProperties 物件, 該物件會在上傳過程中取代檔案, 如果這些檔案已存在於 OneDrive 中。

找到 Create the upload session 註解。在此註解之後, 立即新增下列程式碼:

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");
});

這段程式碼會執行下列工作:

繼續上傳工作階段。
建立 LargeFileUploadTask 物件, 然後將上傳工作階段、要上傳的資料流及最大配量大小傳遞給它。
建立大型檔案上傳 Progress 物件, 記錄上傳流程的資訊。

尋找 try 區塊, 並以下列程式碼取代現有的程式碼:

// 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");
}

這段程式碼會啟動大型檔案上傳流程, 並記錄成功或失敗的相關資訊。

在繼續之前, 請先儲存 GraphFilesClient.cs 檔案。

執行您的應用程式

現在該執行您的應用程式, 並上傳檔案！

請根據您的程式碼編輯器執行下列步驟:
- Visual Studio
  
  按 F5 以組建及執行專案。
- Visual Studio Code 或另一個程式碼編輯器
  
  在 [ 開始 ] 資料夾中開啟終端視窗, 並執行下列命令:
```
dotnet run
```
開啟瀏覽器並前往 https://localhost:5001。
使用您稍早註冊 Microsoft Entra Application 時所使用的 Microsoft 365 開發人員租使用者登入。
選取標頭中的 [檔案] 連結, 以查看使用者的 OneDrive 檔案。
選取 [選擇檔案] 按鈕, 然後從您的電腦中選取您要上傳的檔案。
選取 [上傳檔案] 按鈕, 以啟動上傳流程。檔案上傳完成後, 您會看到頁面中所列的檔案。

注意事項

如果檔案大小大於 4 MB, 請切換至執行中的終端視窗。您將會看到所顯示的上傳檔案狀態。上傳完成後, 會在終端視窗中寫出項目識別碼值, 您會看到在瀏覽器中顯示的檔案名稱。
關閉瀏覽器, 然後在終端機視窗中按 CTRL+C 以停止伺服器之後再繼續。

注意事項

如果您已在 Visual Studio 中開啟專案, 可以關閉瀏覽器或選取 Visual Studio 中的 SHIFT+F5，以停止伺服器。關閉 Visual Studio 建立的終端視窗 (如果它仍為開啟)。

繼續

練習 - 上傳使用者檔案

顯示瀏覽器檔案輸入元素

新增大型檔案上傳支援

執行您的應用程式

意見反應