练习 - 上传用户文件

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 或其他代码编辑器
  
  在 Begin 文件夹中打开终端窗口，并运行以下命令：
```
dotnet run
```
打开浏览器访问 https://localhost:5001。
使用之前注册 Microsoft Entra 应用程序时使用的 Microsoft 365 开发人员租户登录。
选择标题中的“文件”链接，以查看用户的 OneDrive 文件。
选择“选择文件”按钮，然后从计算机选择要上传的文件。
选择“上传文件”按钮以开始上传过程。文件上传完成后，你将看到页面中列出的文件。

注意

如果文件大小大于 4 MB，请切换到正在运行的终端窗口。你将看到显示的已上传文件的状态。上传完成后，项目 ID 值将写入终端窗口，并且你将看到文件名显示在浏览器中。
关闭浏览器，然后在终端窗口中按 CTRL+C停止服务器，然后再继续。

注意

’如果已在 Visual Studio 中打开项目，则可以关闭浏览器或在 Visual Studio 中选择 SHIFT+F5来停止服务器。如果 Visual Studio 创建的终端窗口仍处于打开状态，请关闭它。

练习 - 上传用户文件

显示浏览器文件输入元素

添加大型文件上传支持

运行应用

反馈