如何在Angular 4单页应用中向SharePoint Online库上传文件？

看起来你在Angular 4单页应用里用SharePoint的SP.js和SP.Requestor.js做文件上传时踩坑了——这俩老库和Angular的异步机制、变更检测确实容易打架。我来给你捋捋可能的问题和解决办法：

一、先排查SP脚本的加载顺序 #

SP.js依赖SP.Runtime.js，而且必须在Angular应用初始化前完成加载，不然会出现SP is not defined或者调用方法时无响应的情况。

你可以在index.html里按顺序加载这些脚本：

<script type="text/javascript" src="/_layouts/15/SP.Runtime.js"></script>
<script type="text/javascript" src="/_layouts/15/SP.js"></script>
<script type="text/javascript" src="/_layouts/15/SP.RequestExecutor.js"></script>

如果是部署在SharePoint外部的SPA，记得要处理跨域配置，或者用SPO的App Only权限配合CORS规则。

二、解决Zone.js与SP.js异步回调的冲突 #

Angular的Zone.js负责变更检测，但SP.js的很多异步回调是跑在Angular Zone之外的，这会导致你的alert("added")可能不触发，或者页面状态不更新。

你需要把SP相关的调用包裹在NgZone里：
首先注入NgZone：

import { NgZone } from '@angular/core';

constructor(private zone: NgZone) {}

然后在你的上传逻辑里使用：

this.uploadFile(result, fileList[0].name, "POC").then(result => {
  this.zone.run(() => {
    alert("added");
    // 这里的任何UI更新都会被Angular的变更检测捕获
  });
});

三、改用更可靠的REST API上传方式（替代SP.js） #

如果SP.js的兼容性问题实在搞不定，直接用Angular的HttpClient调用SharePoint REST API上传文件反而更简洁，也更适配Angular的生态：

以下是完整的示例代码：

import { HttpClient, HttpHeaders } from '@angular/common/http';

constructor(private http: HttpClient) {}

UploadFile(event: any) {
  const fileList: FileList = event.target.files;
  if (fileList.length === 0) return;
  
  const file = fileList[0];
  const reader = new FileReader();
  
  reader.onload = (e: any) => {
    const fileBuffer = e.target.result;
    this.uploadViaRest(fileBuffer, file.name, "POC");
  };
  
  reader.readAsArrayBuffer(file);
}

uploadViaRest(fileBuffer: ArrayBuffer, fileName: string, libraryName: string) {
  const siteUrl = window.location.origin + "/sites/your-site"; // 替换成你的站点URL
  const apiUrl = `${siteUrl}/_api/web/GetFolderByServerRelativeUrl('${libraryName}')/Files/add(url='${fileName}', overwrite=true)`;
  
  const headers = new HttpHeaders({
    'Accept': 'application/json;odata=verbose',
    'X-RequestDigest': this.getRequestDigest() // 需要先获取Request Digest值
  });
  
  this.http.post(apiUrl, fileBuffer, { headers: headers })
    .subscribe({
      next: (response) => {
        alert("文件上传成功！");
        console.log(response);
      },
      error: (err) => {
        console.error("上传失败：", err);
        alert("上传失败，请检查控制台日志");
      }
    });
}

// 获取Request Digest的方法
getRequestDigest(): string {
  // 从页面的__REQUESTDIGEST元素获取，或者通过REST API请求
  const digestElement = document.getElementById('__REQUESTDIGEST');
  return digestElement ? digestElement.getAttribute('value') || '' : '';
}

这个方法直接用Angular的HttpClient发起请求，避开了SP.js的兼容性问题，而且更符合Angular的开发习惯。

四、检查你的getFileBuffer封装是否正确 #

从你给出的代码片段看，getFileBuffer应该是把文件转成ArrayBuffer的Promise封装，确保它的实现是正确的：

getFileBuffer(file: File): Promise<ArrayBuffer> {
  return new Promise((resolve, reject) => {
    const reader = new FileReader();
    reader.onload = (e) => resolve(e.target?.result as ArrayBuffer);
    reader.onerror = (err) => reject(err);
    reader.readAsArrayBuffer(file);
  });
}

如果这个封装有问题，后续的上传也会失败，所以先确认这一步能正确返回文件的ArrayBuffer。

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