如何从“上传文件”组件中提取文件名并将它们显示在 UI 上的列表中？

Question

我正在为用户创建一个表单，以便能够将文件从前端直接上传到 AWS S3 存储桶中，并使其正常工作并通过控制台记录“数据”以显示这一点。

然后我想要做的是从数据中提取文件（键）的名称，并使用 useState（在本例中为 [fileInfos，setFilesInfos]）在数组中显示每个文件名，并通过该数组映射以显示每个UI 中列表中的文件名。

问题是我不知道如何从“数据”中提取文件名并将其存储在数组中以开始使用。到目前为止，这是我的代码：

import React, { useRef, useState, useEffect } from 'react';
import S3 from 'react-aws-s3';

const Upload = () => {
  const fileInput = useRef();

  const [selectedFiles, setSelectedFiles] = useState(undefined);
  const [currentFile, setCurrentFile] = useState(undefined);
  const [progress, setProgress] = useState(0);
  const [message, setMessage] = useState('');

  const [fileInfos, setFileInfos] = useState([]);

  const config = {
    bucketName: process.env.REACT_APP_BUCKET_NAME,
    region: process.env.REACT_APP_REGION,
    accessKeyId: process.env.REACT_APP_ACCESS_ID,
    secretAccessKey: process.env.REACT_APP_ACCESS_KEY,
  };

  const selectFile = (e) => {
    setSelectedFiles(e.target.files);
    // console.log(selectedFiles);
  };

  const handleClick = (event) => {
    event.preventDefault();
    let newArr = fileInput.current.files;
    for (let i = 0; i < newArr.length; i++) {
      handleUpload(newArr[i]);
      // console.log(newArr);
    }
  };

  const handleUpload = (file) => {
    let newFileName = file.name;
    const ReactS3Client = new S3(config);
    ReactS3Client.uploadFile(file, newFileName).then((data) => {
      if (data.status === 204) {
        console.log(data);
      } else {
        console.log('fail');
      }
    });
  };

  return (
    <div>
      <form className='' onSubmit={handleClick}>
        {currentFile && (
          <div className='progress'>
            <div
              className='progress-bar progress-bar-info progress-bar-striped'
              role='progressbar'
              aria-valuenow={progress}
              aria-valuemin='0'
              aria-valuemax='100'
              style={{ width: progress + '%' }}
            >
              {progress}%
            </div>
          </div>
        )}

        <label className='btn btn-default'>
          Choose Files
          <input type='file' onChange={selectFile} multiple ref={fileInput} />
        </label>

        <br />
        <button className='btn btn-success' disabled={!selectedFiles} type='submit' onClick={handleUpload}>
          Upload
        </button>

        <div className='alert alert-light' role='alert'>
          {message}
        </div>

        <div className='card'>
          <div className='card-header'>List of Files</div>
          <ul className='list-group'>
            {fileInfos &&
              fileInfos.map((file, index) => (
                <li className='list-group-item' key={index}>
                  <a href={file.url}>{file.name}</a>
                </li>
              ))}
          </ul>
        </div>
      </form>
    </div>
  );
};

export default Upload;

我遇到的主要问题在这里：我如何从数据中取出“密钥”并将其设置为“fileInfos”，以便将其存储在我的状态中？

我希望能够在下面的返回中显示它：

Answer 1

由于您已经拥有“数据”对象，您可以将其提取并附加到您的文件信息中。因此，如果我正确理解您的问题，您可以这样做：

if (data.status === 204) {
   console.log(data);
   const fileName = data.key; // <-- gets the value of 'key'.

   // now store it with the previous names
   let prevValues = [...fileInfos];
   prevValues.push(fileName);

   // set the new values
   setFileInfos(prevValues);
}

然而，这仅存储名称。所以在你的渲染方法中，改变 <p>{file.name}</p>转<p>{file}</p>