Обработка загрузки файла в списке Sharepoint с помощью формы React

Question

Я создаю веб-часть формы с реакцией, но я застрял при загрузке файла, поэтому я хочу загрузить файл, когда он нажмет кнопку отправки, и для этого потребуется создать элемент списка sharepoint с файлом вложения.

выше изображение для справки, чтобы понять.

Теперь я могу создать выше двух тем и комментариев в списке sharepoint, но не уверен для загрузки, чтобы прикрепить с тот же элемент списка, что и 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: []  
      });  
    });  
  }

Приведенный выше код предназначен для обработки отправки. Теперь любой может помочь мне создать функцию дескриптора файла с функциональностью, с помощью которой я хочу создать элемент списка sharepoint с вложением, когда я нажимаю кнопку Submit. Также с сообщением об успехе или ошибке.

Answer 1

Я предлагаю вам использовать эту удивительную библиотеку PNP JS библиотека , с приложениями будет легко работать.

• Использование (PnP JS) библиотеки с веб-частями SharePoint Framework

• Добавление вложений после создания элемента

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

  var fileInfos: IAttachmentFileInfo [] = [];

  fileInfos.pu sh ({имя: «Имя моего файла 1», content: "string, blob или array"});

  // l oop через файлы для (var i = 0; i

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

  fileInfos.pu sh ({имя: 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 ("успешно создан");}). catch (e => {console.log ("Ошибка при создании элемента" + e)});

  }

Для получения более подробной информации, пожалуйста, обратитесь к демонстрации ниже: SharedSPFx