mgt-file-list React组件上传事件缺失及文件未同步至SharePoint的问询

上传后SharePoint无文件的可能原因 #

• 权限不足：组件使用的身份令牌可能缺少Files.ReadWrite.All或对应站点的写入权限。即使UI显示上传完成，实际Graph API请求可能因权限被静默拒绝。
• 目标路径错误：确认item-id（文档库/文件夹ID）或site-id是否配置正确。若指向的位置不存在，上传会失败但组件未给出明确提示。
• 文件规则限制：SharePoint默认限制单个文件最大15GB，同时禁止部分特殊类型文件上传。超出限制的文件会上传失败，但组件UI可能仍显示“完成”。
• 未触发最终上传动作：如果是自定义上传流程，仅选择文件后可能需要手动调用组件的uploadFiles()方法，否则文件不会实际提交到SharePoint。

可用的上传相关事件签名 #

尽管官方文档未明确列出，mgt-file-list基于Graph Toolkit底层实现，支持以下上传事件：

• fileUploadStarted：文件开始上传时触发，可监听上传进度

  document.querySelector('mgt-file-list').addEventListener('fileUploadStarted', (e) => {
    console.log('开始上传:', e.detail.file.name);
    e.detail.onProgress = (progress) => {
      console.log('进度:', progress);
    };
  });
  

• fileUploadCompleted：上传成功完成时触发，返回Graph文件对象

  document.querySelector('mgt-file-list').addEventListener('fileUploadCompleted', (e) => {
    console.log('上传完成，文件ID:', e.detail.file.id);
  });
  

• fileUploadFailed：上传失败时触发，返回错误详情

  document.querySelector('mgt-file-list').addEventListener('fileUploadFailed', (e) => {
    console.error('上传出错:', e.detail.error);
  });
  

React环境下可通过ref绑定事件：

import { MgtFileList } from '@microsoft/mgt-react';
import { useRef, useEffect } from 'react';

function FileUploadComponent() {
  const fileListRef = useRef(null);

  useEffect(() => {
    const nativeComponent = fileListRef.current?.getNativeElement();
    if (nativeComponent) {
      const handleFail = (e) => alert(`上传失败：${e.detail.error.message}`);
      nativeComponent.addEventListener('fileUploadFailed', handleFail);
      return () => nativeComponent.removeEventListener('fileUploadFailed', handleFail);
    }
  }, []);

  return <MgtFileList ref={fileListRef} site-id="你的站点ID" item-id="你的文档库ID" />;
}

快速排查步骤 #

1. 打开浏览器开发者工具，查看Network标签中的Graph API请求，确认上传接口（PUT /sites/.../content）的状态码和响应内容。
2. 检查应用注册的权限范围，确保已授予Files.ReadWrite.All并完成管理员同意（若为租户级应用）。
3. 测试上传小体积、常规格式文件（如txt、jpg），排除大小/类型限制问题。
4. 绑定fileUploadFailed事件，捕获具体错误信息定位问题。

内容的提问来源于stack exchange，提问作者Ofer Gal