在Canvas App中实现更加灵活的文件上传

Posted 2022-08-18 luoyong0201

我是微软Dynamics 365 & Power Platform方面的工程师/顾问罗勇，也是2015年7月到2018年6月连续三年Dynamics CRM/Business Solutions方面的微软最有价值专家(Microsoft MVP)，这是我的第476篇原创文章，写于2022年8月16日。

附件控件的官方文档请参考 ​​Attachments control in Power Apps​​ ，可以用来上传或者下载Microsoft Lists 或者 Microsoft Dataverse table中的文件，仅仅支持Microsoft Lists 或者 Microsoft Dataverse table也是一个重要限制，而且仅仅只能用于表单控件(form)。如何扩展下能更方便灵活的上传呢？这就是今天文章要讲述的内容。

方法非本人原创，主要方法来自 ​​Shane Young​​​ 的 ​​PowerApps upload file to SharePoint document library​​​ 、 ​​PowerApps Attachment Control - Upload All Files not Images Only to Azure Blob Storage​​​ 和 ​​Power Apps Upload Multiple Files AND Drag and Drop Files​​​ 。告诉各位，如果访问不了这些教学视频，可以访问我的​​B站​​，我转载过来了。

因为Attachment控件不能直接插入，所以我先在Microsoft Dataverse中的一个表加了一个类型为 文件 的列，然后在Canvas App中的Screen插入一个Edit Form控件，数据源设置为这个表的第一条记录，然后编辑字段，将这个文件类型的列加入，这样就可以看到Attachment这个控件了。

然后将这个控件复制一下，

然后粘贴一下，因为插入的表单不用了，我们一般删除，这时候Attachment控件的有些属性的值会报错，这是因为有些属性引用了之前表单中Card的一些属性导致的，将属性的值删除即可。

没有文件的时候我不需要提示语言，所以我将该控件的NoAttachmentsText属性清空了，默认文本我更改成了 请选择文件上传或者将文件拖动到此处上传。

这里需要一个必须的辅助控件就是Image控件，将它的Image属性设置为 Last(attUpload.Attachments).Value ，当然用Last可以，用First也可以，因为Attachment控件我设置了最多上传一个控件，支持一次上传多个。另外一个Label控件，是为了让大家更好的看到这个Image控件的内容，在实际使用中是可以不用的。

为Attachment控件的 OnAddFile我添加了代码如下：

UpdateContext(
    
        tempFileContent: JSON(
            imgUpload.Image,
            JSONFormat.IncludeBinaryData
        )
    
);
UpdateContext(
    
        fileContentBase64: Mid(
            tempFileContent,
            Find(
                ",",
                tempFileContent
            ) + 1,
            Len(tempFileContent) - Find(
                ",",
                tempFileContent
            ) - 1
        )
    
);

然后按F5快捷键我们来预览这个App并上传一个图片，可以看到展示了这个图片。

然后将Label控件Text属性设置为 tempFileContent ，就可以看到内容，就会更加明白前面代码的含义，第二行代码就是获取文件的base64格式内容。

假设我需要将这个文件上传到Sharepoint中，这时候我们需要新建一个Flow来辅助。

从头开始创建Flow，先声明两个文本类型的变量，用来接收传递过来的文件名称和文件的base64格式内容。这两个变量的Value都要选择 Ask in PowerApps，一般我会先修改步骤的名称后再点击 Ask in PowerApps。

然后使用SharePoint 这个Connector的 Create file这个Action。

我这里设置如下，注意File Content我用了表达式：base64ToBinary(variables(fileContentBase64)) 

最后添加一个 Respond to a Powerapp or flow的步骤。

最后我在屏幕上新增一个按钮，设置好Text后，我设置它的OnSelect属性为如下代码:

UploadfiletoSharepoint.Run(
    Last(attUpload.Attachments).Name,
    fileContentBase64
);
Reset(attUpload);

当然可以将之前展示的Label控件 lblUpload删除，Image控件imgUpload的Visible设置为false，因为不需要展示出来这个控件也可以达到目的，然后测试下：

可以看到文件上传到了我的Sharepoint中。

下面我们来美化下这个上传按钮。首先我们插入一个 Add document的图标如下。

然后将起Fill等填充颜色的属性设置为 Transparent ，透明的意思，边框暂时不去掉，等设置好了再去掉。然后将前面插入的Add document图标放到Attachment控件的上面，然后右击 Add document 控件，选择 Reorder > Send to back.

最后将Attachment控件的BorderStyle设置为None.

然后预览，看起来好看点了，功能也正常。