ant design 多张图片显示

  // 上传多张图片
  const getBase641 = (file) =>
    new Promise((resolve, reject) => {
      const reader = new FileReader();
      reader.readAsDataURL(file);
      reader.onload = () => resolve(reader.result);
      reader.onerror = (error) => reject(error);
    });
  const [theone, setTheone] = useState(false);
  const [thetwo, setThetwo] = useState('');
  const [preview, setPreview] = useState('');
  const [fileList, setFileList] = useState([]);
 
  const handlePreview = async (file) => {
    if (!file.url && !file.preview) {
      file.preview = await getBase641(file.originFileObj);
    }
    setThetwo(file.url || file.preview);
    setTheone(true);
    setPreview(file.name || file.url.substring(file.url.lastIndexOf('/') + 1));
  };     
 
 
 
         <Upload
            name="file"
            action="自己要用的图片接口"
            listType="picture-card"
            fileList={fileList}
            onPreview={handlePreview}
            onChange={({ fileList: newFileList }) => {
              setFileList(newFileList);
            }}
          >
            {fileList.length >= 3 ? null : <div>上传图片</div>}
          </Upload>
          <Modal
            open={theone}
            title={preview}
            footer={null}
            onCancel={() => setTheone(false)}
          >
            <img
              style={{
                width: '100%',
              }}
              src={thetwo}
            />
          </Modal>
        </div>
      </Modal>

点击编辑的时候可以看到已经存在的图片

const a = 图片的数组.map((url) => ({
                //自己写的数据
              }));
setFileList(a);