使用spfx部件中的SPHttpClient将文件与相应的列数据一起上传到SharePoint Online

import { SPHttpClient, SPHttpClientResponse, ISPHttpClientOptions } from '@microsoft/sp-http';

// 定义文件上传的方法
private async uploadFile(file: File, listName: string, columnName: string, columnValue: string): Promise<void> {
  const webUrl = this.context.pageContext.web.absoluteUrl;
  const fileUrl = `${webUrl}/sites/your-site/${listName}/${file.name}`;

  // 构建文件上传请求
  const fileFormData: FormData = new FormData();
  fileFormData.append('file', file, file.name);

  const fileUploadOptions: ISPHttpClientOptions = {
    body: fileFormData,
    headers: {
      'Accept': 'application/json',
      'Content-Type': 'multipart/form-data',
    },
  };

  // 使用SPHttpClient上传文件
  const fileUploadResponse: SPHttpClientResponse = await this.context.spHttpClient.post(fileUrl, SPHttpClient.configurations.v1, fileUploadOptions);

  // 检查文件上传是否成功
  if (fileUploadResponse.ok) {
    // 文件上传成功，更新列数据
    const itemUrl = `${webUrl}/sites/your-site/${listName}/items`;
    const itemData = {
      '__metadata': { 'type': 'SP.Data.YourListNameListItem' },
      [columnName]: columnValue,
      'FileLeafRef': file.name,
    };

    const itemUpdateOptions: ISPHttpClientOptions = {
      body: JSON.stringify(itemData),
      headers: {
        'Accept': 'application/json',
        'Content-Type': 'application/json',
        'X-HTTP-Method': 'MERGE',
        'IF-MATCH': '*',
      },
    };

    // 使用SPHttpClient更新列数据
    const itemUpdateResponse: SPHttpClientResponse = await this.context.spHttpClient.post(itemUrl, SPHttpClient.configurations.v1, itemUpdateOptions);

    // 检查列数据更新是否成功
    if (itemUpdateResponse.ok) {
      console.log('文件上传和列数据更新成功！');
    } else {
      console.log('列数据更新失败！');
    }
  } else {
    console.log('文件上传失败！');
  }
}