如何将多个文件作为附件上传到 SP 列表项

Question

我正在使用 SPFX 创建一个 SP webpart。 Webpart 需要能够使用一个按钮或多个按钮（每个文件一个按钮）上传多个文件。

我正在尝试使用这个： https://pnp.github.io/pnpjs/sp/attachments/#add-multiple

但它没有显示如何将它与 React 状态一起使用。你看，我希望能够将文件上传保存到状态，然后可以使用按钮提交。那是它附加到 SP 中的列表项的时候。 然后，我希望 webpart 能够在用户单击此项目时显示附加的项目。这就是我需要使用状态的原因。

我读过这个： React SPFx - Adding files to SharePoint list field using PnPjs

还有这个： Handling file upload in Sharepoint List with React form

但他们并不清楚。

有人可以提供一个示例，说明如何将 pnpjs 附件与使用状态的 React 组件类一起使用吗？

Answer 1

我的测试代码供你参考：

    import * as React from 'react';
    import styles from './NewReactSpfx.module.scss';
    import { INewReactSpfxProps } from './INewReactSpfxProps';
    import { escape } from '@microsoft/sp-lodash-subset';
    import { Web } from "sp-pnp-js";
    import IAttachmentInfo from "sp-pnp-js";
    export default class NewReactSpfx extends React.Component<INewReactSpfxProps, any> {
      public constructor(props) {
        super(props);
        this.state = {     
          fileInfos: null
        };
      }
      public render(): React.ReactElement<INewReactSpfxProps> {
        return (
          <div className={styles.newReactSpfx}>
            <div className={styles.container}>
              <div className={styles.row}>
                <div className={styles.column}>
                  <span className={styles.title}>Welcome to SharePoint!</span>
                  <p className={styles.subTitle}>Customize SharePoint experiences using Web Parts.</p>
                  <p className={styles.description}>{escape(this.props.description)}</p>
                  <a href="https://aka.ms/spfx" className={styles.button}>
                    <span className={styles.label}>Learn more</span>
                  </a>
                </div>
                <input type="file" multiple={true} id="file" onChange={this.addFile.bind(this)} />
                <input type="button" value="submit" onClick={this.upload.bind(this)} />
              </div>
            </div>
          </div>
        );
      }
      private addFile(event) {
        //let resultFile = document.getElementById('file');
        let resultFile = event.target.files;
        console.log(resultFile);
        let fileInfos = [];
        for (var i = 0; i < resultFile.length; i++) {
          var fileName = resultFile[i].name;
          console.log(fileName);
          var file = resultFile[i];
          var reader = new FileReader();
          reader.onload = (function(file) {
             return function(e) {
                  //Push the converted file into array
                   fileInfos.push({
                      "name": file.name,
                      "content": e.target.result
                      });
                    }
             })(file);
          reader.readAsArrayBuffer(file);
        }
        this.setState({fileInfos});
        console.log(fileInfos)
      }
      private upload() {
    
    
        let {fileInfos}=this.state;
    
        
        console.log(this.props)
        let web = new Web(this.props.context.pageContext.web.absoluteUrl);
        web.lists.getByTitle("testn").items.getById(2).attachmentFiles.addMultiple(fileInfos);
      }
    }

您可以在这里获得完整的项目：

https://github.com/Amos-IT/SharePoint-FrameWork-Demos/tree/master/NewReactSPFX

更新：

private _onSubmit = (ev) => {
    this.setState({
      FormStatus: 'Submitted',
    }, () => {
      sp.web.lists.getByTitle("PanelMeetings").items.add({
        Title: this.state.Title,
        StartDate: this.state.PanelStartDate,

      }).then(r=>{
        r.item.attachmentFiles.add(this.state.fileInfos)
      });
    });