自定义Microsoft Graph Toolkit的mgt-file-list模板后文件上传失效怎么办？

当你在mgt-file-list里自定义模板时，直接嵌套的mgt-file-upload组件缺少关键的上下文绑定——默认组件内部的上传按钮会自动继承mgt-file-list的目标存储位置（比如当前文件夹ID）和上传限制规则，而自定义模板里的mgt-file-upload需要手动配置这些属性才能正常工作。

你需要给mgt-file-upload添加以下核心属性：

• item-id：指定文件要上传到的文件夹ID，直接绑定mgt-file-list的itemId属性即可（如果你的mgt-file-list指向特定文件夹）
• 继承mgt-file-list上的上传限制属性：file-extensions、max-file-size、max-upload-file，确保上传规则和原组件一致
• 可选：如果针对整个驱动器，用drive-id替代item-id

修改后的代码示例：

<mgt-file-list id="mgtList" enable-file-upload="true" file-extensions="doc, DOC, docx, DOCX, pdf, png, PNG" max-file-size="10000" max-upload-file="5" insight-type="trending">
  <template data-context="this">  
    <mgt-file-upload 
      :item-id="{{itemId}}" 
      file-extensions="doc, DOC, docx, DOCX, pdf, png, PNG" 
      max-file-size="10000" 
      max-upload-file="5"
    ></mgt-file-upload>
    <div class="files">
      <div data-for="file in files" data-props="{{@click: openFile}}" data-type="file" style="width:100%;display:block;border-bottom:1px solid grey;margin-bottom:15px;">
        <h2 alt="{{file.id}}">{{file.name}}</h2>
        <h3>{{file.createdDateTime}}</h3>
        <h3><a href="{{file.webUrl}}" target="_blank">View File</a></h3>
      </div>
    </div>
  </template>
</mgt-file-list>

关键注意点：

• 给<template>加上data-context="this"，这样才能访问mgt-file-list组件自身的itemId属性
• :item-id="{{itemId}}"通过绑定语法把父组件的目标文件夹ID传给上传组件，确保文件上传到正确位置
• 同步上传限制属性，保持和原组件的规则一致

配置完成后，mgt-file-upload就能获取到正确的上传上下文，完成文件上传操作。

内容的提问来源于stack exchange，提问作者Andrew Steven