在 PowerApps 中使用多媒体文件Using multimedia files in PowerApps

本主题介绍如何在应用中嵌入多媒体文件、将笔绘作品上载到数据源,然后在应用中显示该数据源中的图像。This topic shows you how to embed multimedia files in your app, upload pen drawings to a data source, and show images from a data source in your app. 本主题使用的数据源是 OneDrive for Business 中的一个 Excel 文件。The data source used in this topic is an Excel file in OneDrive for Business.

必备组件Prerequisites

注册安装 PowerApps。Sign up for PowerApps, and install it. 打开 PowerApps 时,使用注册所用的凭据登录。When you open PowerApps, sign in using the same credentials that you used to sign up.

从文件或云添加媒体Add media from a file or the cloud

可以选择要添加的媒体文件类型(例如图像、视频或音频)。You can choose the kind of media file to add (for example, images, video, or audio).

  1. 在“内容”选项卡中选择“媒体”。On the Content tab, select Media.
  2. 在“媒体”下面,选择“图像”、“视频”或“音频”,然后选择“浏览”:Under Media, select Images, Videos, or Audio, and then select Browse:

  3. 选择要添加的文件,然后选择“打开”。Select the file that you want to add, and then select Open.

    此时将打开计算机上的“图片”文件夹,可从中选择图像或导航到另一个文件夹。The Pictures folder on your computer opens, and you can select an image from there or navigate to another folder.

  4. 添加完文件后,请按 Esc 返回默认工作区。When you finish adding files, press Esc to return to the default workspace.
  5. 在“插入”选项卡中选择“媒体”,然后选择“图像”、“视频”或“音频”:On the Insert tab, select Media, and then select Image, Video, or Audio:

  6. 如果添加了图像控件,请将其 Image 属性设置为添加的文件:If you added an image control, set its Image property to the file that you added:

    设置 Image 属性

    注意:请仅指定文件名并将其括在单引号中,不要指定扩展名。Note Specify the file name only, without the extension, inside single quotes.

  7. 如果添加了视频或音频控件,请将其 Media 属性设置为添加的文件:If you added a video or audio control, set its Media property to the file that you added:

    设置 Media 属性

    注意:若要播放 YouTube 视频,请将视频控件的 Media 属性设置为相应的 URL,并将 URL 括在双引号中。Note Play a YouTube video by setting the Media property of a video control to the appropriate URL, enclosed in double quotation marks.

从 Azure 媒体服务添加媒体Add media from Azure Media Services

  1. 通过 Azure 媒体服务帐户的“AMS”>“设置”>“资产”上传并发布视频资产。From your Azure Media Services account, upload and publish your video asset from AMS > Settings > Assets.
  2. 发布视频后,复制其 URL。After the video is published, copy its URL.
  3. 通过 PowerApps 的“插入”>“媒体”添加“视频”控件。From PowerApps, add the Video control from Insert > Media.
  4. Media 属性设置为已复制的 URL。Set the Media property to the URL that you copied.

如图所示,你可以选择 Azure 媒体服务支持的任何流式处理 URL:As this graphic shows, you can choose any streaming URL that Azure Media Services supports:

设置 Media 属性

将云中的图像添加到应用Add images from the cloud to your app

在此情景中,图像保存在云存储帐户 OneDrive for Business 中。In this scenario, you save images in a cloud storage account, OneDrive for Business. 你要使用 Excel 表格来包含图像的路径,并在应用的库控件中显示图像。You use an Excel table to contain the path to the images, and you display the images in a gallery control in your app.

此情景使用包含一些 .jpeg 文件的 CreateFirstApp.zipThis scenario uses the CreateFirstApp.zip that contains some .jpeg files.

注意:Excel 文件中这些图像的路径必须使用正斜杠。NOTE: The path to these images in the Excel file must use forward slashes. 当 PowerApps 在 Excel 表格中保存图像路径时,路径使用反斜杠。When PowerApps saves image paths in an Excel table, the path uses backslashes. 如果使用此类中的图像路径,请将 Excel 表格中的路径更改为使用正斜杠而不是反斜杠。If you use image paths from such a table, change the paths in the Excel table to use forward slashes instead of backslashes. 否则图像不会显示。Otherwise, the images won't display.

  1. 下载 CreateFirstApp.zip,并将 Assets 文件夹解压缩到云存储帐户。Download CreateFirstApp.zip, and extract the Assets folder to your cloud storage account.
  2. Assets 文件夹重命名为 Assets_imagesRename the Assets folder to Assets_images.
  3. 在 Excel 电子表格创建一个单列表格,并在其中填充以下数据:In an Excel spreadsheet, create a one-column table, and fill it with the following data:

    Jackets 表格

  4. 将表格命名为 Jackets,将 Excel 文件命名为 Assets.xlsxName the table Jackets, and name the Excel file Assets.xlsx.
  5. 在应用中添加 Jackets 表格作为数据源。In your app, add the Jackets table as a data source.
  6. 添加“仅图像”控件(“插入”选项卡 >“库”),然后将其 Items 属性设置为 JacketsAdd an Image only control (Insert tab > Gallery), and set its Items property to Jackets:

    项属性

    库将自动更新图像:The gallery is automatically updated with the images:

    Jacket 图像

    设置 Items 属性时,会自动将名为 PowerAppsId 的列添加到 Excel 表格。When you set the Items property, a column named PowerAppsId is automatically added to the Excel table.

    在 Excel 表格中,图像路径可以是到图像的 URL。In the Excel table, the image path can also be the URL to an image. Flooring Estimates 示例文件就是一个例子。An example is the Flooring Estimates sample file. 可将该文件下载到云存储帐户,在应用中添加 FlooringEstimates 表格作为数据源,然后将库控件设置为 FlooringEstimatesYou can download it to your cloud storage account, add the FlooringEstimates table as a data source in your app, and then set the gallery control to FlooringEstimates. 库将自动更新图像。The gallery is automatically updated with the images.

将笔绘作品上载到云Upload pen drawings to the cloud

此情景演示如何将笔绘作品上载到数据源 OneDrive for Business,然后了解绘图作品在该位置的存储方式。In this scenario, you learn how to upload pen drawings to your data source, OneDrive for Business, and examine how the drawings are stored there.

  1. 在 Excel 中,将“图像 [image]”添加到 A1 单元格。In Excel, add Image [image] to cell A1.
  2. 使用以下步骤创建表格:Create a table using the following steps:

    a.a. 选择 A1 单元格。Select cell A1.

    b.b. 在“插入”功能区中选择“表格”。On the Insert ribbon, select Table.

    c.c. 在对话框中选择“表包含标题”,然后选择“确定”。In the dialog box, select My table has headers, and then select OK.

    创建表格

    Excel 文件现在采用表格格式。Your Excel file is now in a table format. 有关 Excel 中表格格式设置的详细信息,请参阅将数据设为表格格式See Format the data as a table for more information about table formatting in Excel.

    d.d. 将表格命名为 DrawingsName the table Drawings:

    将表格重命名为 Drawings

  3. 将该 Excel 文件以文件名 SavePen.xlsx 保存到 OneDrive for Business。Save the Excel file to OneDrive for Business as SavePen.xlsx.
  4. 在 PowerApps 中,创建一个空白应用In PowerApps, create a blank app.
  5. 在该应用中,将 OneDrive for Business 帐户添为数据源In your app, add the OneDrive for Business account as a data source:

    a.a. 单击或点击“视图”选项卡,然后单击或点击“数据源”。Click or tap the View tab, and then click or tap Data sources.

    b.b. 单击或点击“添加数据源”,然后单击或点击“OneDrive for Business”。Click or tap Add data source, and then click or tap OneDrive for Business.

    c.c. 单击或点击“SavePen.xlsx”。Click or tap SavePen.xlsx.

    d.d. 选择 Drawings 表格,然后单击或点击“连接”。Select the Drawings table, and then click or tap Connect.

    连接

    现在,Drawings 表格已作为数据源列出。Now, the Drawings table is listed as a data source.

  6. 在“插入”选项卡中,依次选择“文本”和“笔输入”。On the Insert tab, select Text, and then select Pen input.
  7. 将新控件重命名为 MyPenRename the new control MyPen:

    重命名

  8. 在“插入”选项卡中添加一个“按钮”控件,并将其 OnSelect 属性设置为以下公式:On the Insert tab, add a Button control, and set its OnSelect property to this formula:

     Patch(Drawings, Defaults(Drawings), {Image:MyPen.Image})
    
  9. 添加“图像库”控件(“插入”选项卡 >“库”),然后将 Items 属性设置为 DrawingsAdd an Image gallery control (Insert tab > Gallery), and set its Items property to Drawings. 库控件的 Image 属性将自动设置为 ThisItem.ImageThe Image property of the gallery control is automatically set to ThisItem.Image.

    排列这些控件,使屏幕外观如下所示:Arrange the controls so that your screen resembles the following:

    示例屏幕

  10. 按 F5 或选择“预览”()。Press F5, or select Preview ( ).
  11. 在 MyPen 中绘制一些内容,然后选择按钮。Draw something in MyPen, and then select the button.

    库控件中的第一幅图像将显示你绘制的内容。The first image in the gallery control displays what you drew.

  12. 在绘图中添加其他一些内容,并选择按钮。Add something else to your drawing, and select the button.

    库控件中的第二幅图像将显示你绘制的内容。The second image in the gallery control displays what you drew.

  13. 按 Esc 关闭预览窗口。Close the preview window by pressing Esc.

    云存储帐户中已自动创建一个 SavePen_images 文件夹。In your cloud storage account, a SavePen_images folder has been automatically created. 此文件夹包含保存的图像,其中 ID 代表它们的文件名。This folder contains your saved images with IDs for their file names. 若要显示该文件夹,可能需要刷新浏览器窗口(例如,按 F5)。To show the folder, you may need to refresh the browser window by, for example, pressing F5.

    SavePen.xlsx 中,Image 列指定新图像的路径。In SavePen.xlsx, the Image column specifies the path to the new images.

已知的限制Known limitations

若要了解如何在组织内共享 Excel 数据,请查看这些限制For information about how to share Excel data within your organization, review these limitations.

有关For more information

请务必在不同的平台上测试应用,包括在浏览器窗口和手机上测试。Be sure to test your app on different platforms, including in a browser window and on a phone.

若要了解涉及将多媒体直接上载到不同数据源的更高级方案,请参阅有关捕获图像的专业提示用于上载图像的自定义连接器For information about more advanced scenarios that involve uploading multimedia directly to a different data source, see image capture pro tips and custom connectors for image upload.

将文件上载到数据源的另一种方法是使用 Patch 函数。Another way to upload files to a data source is to use the Patch function.