使用 React 表单处理 Sharepoint List 中的文件上传答案

【问题标题】：Handling file upload in Sharepoint List with React form使用 React 表单处理 Sharepoint List 中的文件上传
【发布时间】：2020-08-11 10:56:54
【问题描述】：

我正在创建一个带有 react 的表单 webpart，但我一直在上传文件，所以我想在点击提交按钮时上传一个文件，并且必须创建带有附件文件的共享点列表项。

上图仅供参考理解。

现在我可以在共享点列表中创建以上两个主题和 cmets，但不确定是否要上传与 attachments 相同的列表项。

<div className={styles.row}>
          <ReactFileReader fileTypes={[".csv", ".xlsx", ".Docx", ".pdf"]} base64={true} handleFiles={this.handleFiles.bind(this)}>
            <button className='btn' value={this.state.UploadedFilesArray.toString()} >Upload</button>
          </ReactFileReader>
        </div>
        <div className={styles.row}>
        <div  >
          <button id="btn_add" className={styles.button} onClick={this.createItem.bind(this)}>Submit</button>
        </div>

以上代码用于上传和提交，正如我所说，我想在提交表单时附上附件。

  private createItem(): void {  
    this.setState({  
      status: 'Creating item...',  
      items: []  
    });
    const body: string = JSON.stringify({
      'Title': this.state.subject,
      'Comments': this.state.comments,
    });    
    this.props.spHttpClient.post(`${this.props.siteUrl}/_api/Web/lists/getbytitle('${this.props.listName}')/items`,  
    SPHttpClient.configurations.v1,  
    {  
      headers: {  
        'Accept': 'application/json;odata=nometadata',  
        //"Accept": "application/json; odata=verbose",
        'Content-type': 'application/json;odata=nometadata',  
        'odata-version': ''  
      },
      body: body
    })  
    .then((response: SPHttpClientResponse): Promise<IListItem> => {  
      return response.json();  
      console.log(response)
    })  
    .then((item: IListItem): void => {  
      this.setState({
        status: `Item '${item.Title}' (ID: ${item.Id}) successfully created`,  
        items: []  
      });  
    }, (error: any): void => {  
      this.setState({  
        status: 'Error while creating the item: ' + error,  
        items: []  
      });  
    });  
  }

以上代码用于处理提交，现在任何人都可以帮助我创建句柄文件函数，该函数具有我想在点击提交按钮时创建带有附件的共享点列表项的功能。还带有成功或错误消息。

【问题讨论】：

标签： javascript reactjs typescript sharepoint

【解决方案1】：

我建议你使用这个很棒的库PNPJS library，它会很容易处理附件。

Use (PnPJS) library with SharePoint Framework web parts
创建项目后添加附件

private handleFiles(f) {
 var filelist = f.fileList;

 var fileInfos: IAttachmentFileInfo[] = [];

 fileInfos.push({
   name: "My file name 1",
   content: "string, blob, or array"
 });

 // loop through files
 for (var i = 0; i < filelist.length; i++) {

   // get item
   let file: File = filelist.item(i);

   fileInfos.push({
     name: file.name,
     content: file
   });

 }

 this.setState({
   uploadfiles: fileInfos
 });
}

private createItem(): void {

  sp.web.lists.getByTitle("mylist").items.add({
    'Title': this.state.subject
  }).then((r: IItemAddResult) => {
    r.item.attachmentFiles.addMultiple(this.state.uploadfiles);
  }).then(e => {
    console.log("successfully created");
  }).catch(e => {
    console.log("Error while creating the item" + e)
  });
}

更多详情，请参考以下demo： SharedSPFx

【讨论】：