Question

我试图找到如何为上传到SharePoint列表项上的附件的spfx Web部件创建文件上传功能。我可以成功上传，但是用户应该能够单击SP列表项（然后它会弹出显示附件的模态），然后允许他们删除附件，最后单击一个更新按钮来添加新文件和/或删除不需要的文件。

此刻，我正在使用它来添加文件：

private _addFile = (event) => {
   let resultFile = event.target.files;
   console.log(resultFile, 'resultFile');
   let fileInfos = [];
   for (var i = 0; i < resultFile.length; i++) {
               
     var resfile = resultFile[i];
      console.log(resfile, 'resfile');
       var reader = new FileReader();
        reader.onload = ((file) => {
           return (e) => {
             //Push the converted file into array
              fileInfos.push({
                "name": file.name,
                "content": e.target.result
           
                });
                    
               this.setState({
               addedFiles: [...this.state.addedFiles, ...[file.name]]
               },() => {
                  
                if(this.state.addedFiles[0]){
                 this.setState({
                  FileAttachment1: fileInfos[0].name
                  });
                 }
                 if(this.state.addedFiles[1]){
                  this.setState({
                    FileAttachment2: fileInfos[1].name
                   });
                  }
                  if(this.state.addedFiles[2]){
                   this.setState({
                     FileAttachment3: fileInfos[2].name
                     });
                    }
      
                  });
                  
               };
                  
           })(resfile);
          
        reader.readAsArrayBuffer(resfile);
        // @ts-ignore
      const fileListToArr = Array.from(resultFile);
  
      if(this.state.fileArray){
      this.setState({
        fileArray: fileListToArr

          }, () => {
            console.log(this.state.fileArray, 'this.state.fileArray');
          });
      }
      this.setState({
        fileInfos,

      });
    }
       
  }

我正在使用它来检索文件（当用户单击SP项目时）：

let attachmentName = sp.web.lists.getByTitle("MyList").items.getById(sid);
     attachmentName.attachmentFiles.get().then((files)=>{  
       this.setState({
         fileInfos: files
       });

在列表中每个文件的旁边都有一个删除图标，用于拾取已删除项目的ID，这是其中一个已上传项目的JSX：

<p>{this.state.FileAttachment1 ? this.state.FileAttachment1 : null}
                {this.state.FileAttachment1 ? <div className={styles.editIcon}><Icon iconName="Delete" id={'att1'} onClick={this._removeFile}/></div> : null }
                </p>

我已经尝试过删除文件：

private _removeFile = (ev) => {
    const cid = ev.target.id;
  console.log(cid, 'cid'); //this gives the id for the selected file.
  console.log(this.state.fileInfos);

  let filteredArray = this.state.fileInfos.filter(item => );
      
    this.setState({
      fileInfos: filteredArray,
    },() => 
    {console.log(this.state.fileInfos, 'state.fileInfos');});
    if(cid == 'att1'){
      
     this.setState({
   
     });
    }
    if(cid == 'att2'){
      this.setState({
     
      });
     }
    if(cid == 'att3'){
      this.setState({
      
      });
     }
  }

正如您在最后一个函数上看到的，我一直是trying to use a filter to remove the item from the array fileInfos，但是每当我单击delete删除文件时，它都不会从处于状态的fileInfos数组中删除它。

有人能得到更好的解决方案还是更好的，我可以使用更好的文件管理系统？ PS。我知道在列表项上使用文件附件已经很不习惯了。

如何使用pnp js更新列表项附件？

0 个答案: