Microsoft Graph 工具包中的文件列表组件

项目
03/15/2023

文件列表组件使用文件/文件夹名称、图标和指定的其他属性显示多个文件夹和文件的列表。此组件使用 mgt-file 组件。可以指定特定的驱动器或站点，根据见解类型显示文件列表， (趋势、使用或共享) ，或者提供对自定义文件列表的查询。该组件还提供了允许用户将文件上传到 One Drive 或 SharePoint 中的指定位置的选项。

示例

以下示例使用 mgt-file-list 组件显示文件。可以使用代码编辑器来查看属性如何更改组件的行为。

在 mgt.dev 中打开此示例

属性

可以使用多个属性来自定义组件。

属性	属性	说明
file-list-query	fileListQuery	包含要呈现的文件列表的驱动器或站点的完整查询或路径。
file-queries	fileQueries	组件要呈现的文件查询数组。
无	files	要获取或设置组件呈现的文件列表的文件数组。使用此访问组件加载的文件。设置此值以加载自己的文件。
insight-type	insightType	设置为显示用户的趋势文件、已使用文件或共享文件。
drive-id	driveId	文件夹所属驱动器的 ID。还必须提供 `item-id` 或 `item-path`。
group-id	groupId	文件夹所属组的 ID。还必须提供 `item-id` 或 `item-path`。
site-id	siteId	文件夹所属站点的 ID。还必须提供 `{item-id}` 或 `{item-path}`。如果从特定列表引用文件，请提供 `{list-id}` 。
item-id	itemId	文件夹的 ID。默认查询为 `/me/drive/items`。提供 `{drive-id}`、 `{group-id}`、 `{site-id}`或 `{user-id}` 以查询特定位置。
item-path	itemPath	相对于根) 的文件夹 (的项路径。默认查询为 `/me/drive/root`。提供 `{drive-id}`、 `{group-id}`、 `{site-id}`或 `{user-id}` 以查询特定位置。
page-size	pageSize	一个数字值，指示每页上要呈现的最大文件数。注意：`page-size` 不支持 `insight-type`。
file-extensions	fileExtensions	用于筛选要显示的文件的文件扩展名数组。
hide-more-files-button	hideMoreFilesButton	布尔值，指示是否显示用于呈现更多文件的按钮。
enable-file-upload	enableFileUpload	用于启用或禁用文件上传功能的布尔值。默认值为 `false`。
excluded-file-extensions	excludedFileExtensions	要从文件上传中排除的文件扩展名的字符串数组。还必须将 `enable-file-upload` 属性设置为 `true`。
max-file-size	maxFileSize	表示最大文件上传大小 (KB) 的数字。还必须将 `enable-file-upload` 属性设置为 `true`。
max-upload-file	maxUploadFile	一个数字，表示允许上传的最大文件数。默认值 `10` 为 files。还必须将 `enable-file-upload` 属性设置为 `true`。

以下示例更改组件的行为，以便从特定查询中提取文件列表。

<mgt-file-list file-list-query="/me/drive/items/01BYE5RZYJ43UXGBP23BBIFPISHHMCDTOY/children"></mgt-file-list>

以下示例通过提供文件夹 ID 更改组件的行为，以从文件夹中提取文件列表。

<mgt-file-list item-id="01BYE5RZYJ43UXGBP23BBIFPISHHMCDTOY"></mgt-file-list>

以下示例通过提供组 ID 和文件夹路径更改组件从组提取文件列表的行为。

<mgt-file-list group-id="8090c93e-ba7c-433e-9f39-08c7ba07c0b3" item-path="/Design"></mgt-file-list>

以下示例通过提供用户 ID 和文件夹 ID 更改组件的行为，以便从用户提取文件列表。

<mgt-file-list user-id="48d31887-5fad-4d73-a9f5-3c356e68a038" item-id="01BYE5RZYFPM65IDVARFELFLNTXR4ZKABD"></mgt-file-list>

以下示例通过提供见解类型来更改组件获取文件列表的行为。

<mgt-file-list insight-type="shared"></mgt-file-list>

以下示例启用文件上传功能。

<mgt-file-list enable-file-upload></mgt-file-list>

以下示例将可上载的最大文件数限制为 5。

<mgt-file-list max-upload-file="5" enable-file-upload></mgt-file-list>

以下示例将可上载的最大文件大小限制为 10000 KB。

<mgt-file-list max-file-size="10000" enable-file-upload></mgt-file-list>

以下示例排除了文件扩展名为“.doc，.pdf”的文件上传。

<mgt-file-list excluded-file-extensions=".doc,.pdf" enable-file-upload></mgt-file-list>

方法

方法	说明
重新加载 (clearCache = false)	调用方法以根据组件的属性重新加载具有潜在新数据的组件。传递 `true` 以在重新加载之前清除缓存。

CSS 自定义属性

组件 mgt-file-list 定义以下 CSS 自定义属性。

mgt-file-list {
  --font-family: 'Segoe UI';
  --font-size: 14px;

  --file-list-background-color: #ffffff;
  --file-list-border: none;
  --file-list-box-shadow: none;
  --file-list-padding: 4px 0;
  --file-list-margin: 0;

  --file-item-background-color--hover: rgba(0, 0, 0, 0.1);
  --file-item-background-color--active: rgba(0, 0, 0, 0.05);
  --file-item-border-radius: 2px;
  --file-item-margin: 0 4px;

  --file-item-border-top: none;
  --file-item-border-left: none;
  --file-item-border-right: none;
  --file-item-border-bottom: none;

  --show-more-button-background-color: #f3f2f1;
  --show-more-button-background-color--hover: rgba(0, 0, 0, 0.1);
  --show-more-button-font-size: 12px;
  --show-more-button-padding: 6px;
  --show-more-button-border-bottom-right-radius: 4px;
  --show-more-button-border-bottom-left-radius: 4px;

  --file-upload-border: 4px dotted #ffbdc3;
  --file-upload-background-color: rgba(255, 0, 0, 0.1);
  --file-upload-button-float: left;
  --file-upload-button-color: #323130;
  --file-upload-button-background-color: #fef8dd;
  --file-upload-dialog-content-background-color: #ffe7c7;
  --file-upload-dialog-primarybutton-background-color: #ffe7c7;
  --file-upload-dialog-primarybutton-color: #323130;
}

若要了解详细信息，请参阅设置组件样式。

Microsoft Graph API 和权限

配置	权限	API
默认 (未提供任何标识符或查询)	Files.Read、Files.Read.All、Sites.Read.All	`GET /me/drive/root/children`
提供 `enable-file-upload`	Files.Read、Files.Read.All、Sites.Read.All、Files.ReadWrite、Files.ReadWrite.All、Sites.ReadWrite.All	`GET /me/drive/root/children` `PUT /me/drive/root:/{filename}:/content` `POST /me/drive/root:/{filename}:/createUploadSession`
提供 `{drive-id}` AND `{item-id}`	Files.Read、Files.Read.All、Sites.Read.All	`GET /drives/{drive-id}/items/{item-id}/children`
提供 `{drive-id}` AND AND `{item-id}enable-file-upload`	Files.Read、Files.Read.All、Sites.Read.All、Files.ReadWrite、Files.ReadWrite.All、Sites.ReadWrite.All	`GET /drives/{drive-id}/items/{item-id}/children` `PUT /drives/{drive-id}/items/{item-id}:/{filename}:/content` `POST /drives/{drive-id}/items/{item-id}:/{filename}:/createUploadSession`
提供 `{group-id}` AND `{item-id}`	Files.Read、Files.Read.All、Sites.Read.All	`GET /groups/{group-id}/drive/items/{item-id}/children`
提供 `{group-id}` AND AND `{item-id}enable-file-upload`	Files.Read、Files.Read.All、Sites.Read.All、Files.ReadWrite、Files.ReadWrite.All、Sites.ReadWrite.All	`GET /groups/{group-id}/drive/items/{item-id}/children` `PUT /groups/{group-id}/drive/items/{item-id}:/{filename}:/content` `POST /groups/{group-id}/drive/items/{item-id}:/{filename}:/createUploadSession`
仅提供 `{item-id}`	Files.Read、Files.Read.All、Sites.Read.All	`GET /me/drive/items/{item-id}/children`
仅 `{item-id}` 提供和 `enable-file-upload`	Files.Read、Files.Read.All、Sites.Read.All、Files.ReadWrite、Files.ReadWrite.All、Sites.ReadWrite.All	`GET /me/drive/items/{item-id}/children` `PUT /me/drive/items/{item-id}:/{filename}:/content` `POST /me/drive/items/{item-id}:/{filename}:/createUploadSession`
提供 `{site-id}` AND `{item-id}`	Files.Read、Files.Read.All、Sites.Read.All	`GET /sites/{site-id}/drive/items/{item-id}/children`
提供 `{site-id}` AND AND `{item-id}enable-file-upload`	Files.Read、Files.Read.All、Sites.Read.All、Files.ReadWrite、Files.ReadWrite.All、Sites.ReadWrite.All	`GET /sites/{site-id}/drive/items/{item-id}/children` `PUT /sites/{site-id}/drive/items/{item-id}:/{filename}:/content` `POST /sites/{site-id}/drive/items/{item-id}:/{filename}:/createUploadSession`
提供 `{user-id}` AND `{item-id}`	Files.Read、Files.Read.All、Sites.Read.All	`GET /users/{user-id}/drive/items/{item-id}/children`
提供 `{user-id}` AND AND `{item-id}enable-file-upload`	Files.Read、Files.Read.All、Sites.Read.All、Files.ReadWrite、Files.ReadWrite.All、Sites.ReadWrite.All	`GET /users/{user-id}/drive/items/{item-id}/children` `PUT /users/{user-id}/drive/items/{item-id}:/{filename}:/content` `POST /users/{user-id}/drive/items/{item-id}:/{filename}:/createUploadSession`
提供 `{drive-id}` AND `{item-path}`	Files.Read、Files.Read.All、Sites.Read.All	`GET /drives/{drive-id}/root:/{item-path}:/children`
提供 `{drive-id}` AND AND `{item-path}enable-file-upload`	Files.Read、Files.Read.All、Sites.Read.All、Files.ReadWrite、Files.ReadWrite.All、Sites.ReadWrite.All	`GET /drives/{drive-id}/root:/{item-path}:/children` `PUT /drives/{drive-id}/root:/{item-path}/{filename}:/content` `POST /drives/{drive-id}/root:/{item-path}/{filename}:/createUploadSession`
提供 `{group-id}` AND `{item-path}`	Files.Read、Files.Read.All、Sites.Read.All	`GET /groups/{group-id}/root:/{item-path}:/children`
提供 `{group-id}` AND AND `{item-path}enable-file-upload`	Files.Read、Files.Read.All、Sites.Read.All、Files.ReadWrite、Files.ReadWrite.All、Sites.ReadWrite.All	`GET /groups/{group-id}/root:/{item-path}:/children` `PUT /groups/{group-id}/root:/{item-path}/{filename}:/content` `POST /groups/{group-id}/root:/{item-path}/{filename}:/createUploadSession`
提供 `{site-id}` AND `{item-path}`	Files.Read、Files.Read.All、Sites.Read.All	`GET /sites/{site-id}/root:/{item-path}:/children`
提供 `{site-id}` AND AND `{item-path}enable-file-upload`	Files.Read、Files.Read.All、Sites.Read.All、Files.ReadWrite、Files.ReadWrite.All、Sites.ReadWrite.All	`GET /sites/{site-id}/root:/{item-path}:/children` `PUT /sites/{site-id}/root:/{item-path}/{filename}:/content` `POST /sites/{site-id}/root:/{item-path}/{filename}:/createUploadSession`
提供 `{user-id}` AND `{item-path}`	Files.Read、Files.Read.All、Sites.Read.All	`GET /users/{user-id}/root:/{item-path}:/children`
提供 `{user-id}` AND AND `{item-path}enable-file-upload`	Files.Read、Files.Read.All、Sites.Read.All、Files.ReadWrite、Files.ReadWrite.All、Sites.ReadWrite.All	`GET /users/{user-id}/root:/{item-path}:/children` `PUT /users/{user-id}/root:/{item-path}/{filename}:/content` `POST /users/{user-id}/root:/{item-path}/{filename}:/createUploadSession`
仅提供 `{item-path}`	Files.Read、Files.Read.All、Sites.Read.All	`GET /me/drive/root:/{item-path}:/children`
仅 `{item-path}` 提供 AND `enable-file-upload`	Files.Read、Files.Read.All、Sites.Read.All、Files.ReadWrite、Files.ReadWrite.All、Sites.ReadWrite.All	`GET /me/drive/root:/{item-path}:/children` `PUT /me/drive/root:/{item-path}/{filename}:/content` `POST /me/drive/root:/{item-path}/{filename}:/createUploadSession`
`insight-type` 设置为趋势	Sites.Read.All	`GET /me/insights/trending`
“提供 `{user-id or upn}` AND `insight-type` ”设置为 `trending`	Sites.Read.All	`GET /users/{id or userPrincipalName}/insights/trending`
`insight-type` 设置为 `used`	Sites.Read.All	`GET /me/insights/used`
“提供 `{user-id or upn}` AND `insight-type` ”设置为 `used`	Sites.Read.All	`GET /users/{id or userPrincipalName}/insights/used`
`insight-type` 设置为共享	Sites.Read.All	`GET /me/insights/shared`
“提供 `{user-id or upn}` AND `insight-type` ”设置为 `shared`	Sites.Read.All	`GET /users/{id or userPrincipalName}/insights/shared?$filter=((lastshared/sharedby/id eq '${user-id}') and (resourceReference/type eq 'microsoft.graph.driveItem'))`

事件

Event	何时发出	自定义数据	可取消	泡沫	使用自定义模板
`itemClick`	当用户单击文件时触发。	所选文件	否	否	是，使用自定义文件模板

有关处理事件的详细信息，请参阅事件。

模板

组件 mgt-file-list 支持多个模板，可用于替换组件的某些部分。若要指定模板，请在组件中包含元素 <template> ， data-type 并将值设置为下表中列出的数据类型之一。

数据类型	数据上下文	说明
默认	`files`：文件对象列表	默认模板将整个组件替换为你自己的组件。
file	`file`：file 对象	用于呈现每个文件的模板。
no-data	未传递任何数据上下文	在没有可用数据时使用的模板。
加载	未传递任何数据上下文	组件加载状态时使用的模板。

身份验证

控件使用身份验证文档中所述的全局身份验证提供程序来提取所需的数据。

缓存

对象存储	缓存的数据	备注
`fileLists`	文件列表列表	用于存储文件列表的默认缓存列表。
`insightfileLists`	见解文件列表列表	在提供时 `insightType` 使用。

注意

提供时fileQueries，组件mgt-file-list还使用 fileQueries IndexedDB 中的mgt-file对象存储来缓存文件。

有关如何配置缓存的详细信息，请参阅缓存。

Microsoft Graph 工具包中的文件列表组件

示例

属性

方法

CSS 自定义属性

Microsoft Graph API 和权限

事件

模板

身份验证

缓存

其他资源

其他资源