antd：如何在Dragger Upload右侧显示fileuploadlist

Question

我试图将文件上传列表显示在上传拖动器元素的右侧，因为屏幕上的空间在垂直方向上是有限的。作为参考，这是我正在尝试做的事情的图像示例：

但是，无论我做什么，生成的文件上传列表始终显示在拖动器下方。即使我指定“display: inline-block”作为样式。由于antd框架的原因，上传列表似乎是动态生成的，我无法修改其位置。如果可以使用 antd 生成的上传列表，任何人都可以了解任何见解吗？

import React from 'react';
import { Upload, Icon, message, Typography, Button } from 'antd';

const { Dragger } = Upload;

export interface projectFilesUploadFormProps {
    handleUpdateAndNext(updateProjectDetails: () => void): void;
    handleBack(): void;

}


const draggerProps = {
    name: 'file',
    multiple: true,
    action: 'https://www.mocky.io/v2/5cc8019d300000980a055e76',
    onChange(info: { file: { status?: any; name?: any; }; fileList: any; }) {
      const { status } = info.file;
      if (status !== 'uploading') {
        console.log(info.file, info.fileList);
      }
      if (status === 'done') {
        message.success(`${info.file.name} file uploaded successfully.`);
      } else if (status === 'error') {
        message.error(`${info.file.name} file upload failed.`);
      }
    },
  };

export const ProjectFilesUploadForm = (props: projectFilesUploadFormProps) => {


    return (
        <div
        style={{
            display: 'flex',
            flexDirection: 'column',
            justifyContent: 'space-between',
            height: 'inherit'
        }}
      >
          <span>
        <Typography.Title level={2}>
          Upload your Project files
        </Typography.Title>
        <Typography.Text >
          It can be any kind of file 
        </Typography.Text>
      </span>
      <span style={{ display: 'inline-block'}}> <---- DOESN'T DISPLAY INLINE
        <Dragger  listType="picture" style={{borderRadius: 0, width: '50%'}} {...draggerProps}>
        <p className="ant-upload-drag-icon">
          <Icon type="inbox" />
        </p>
        <p className="ant-upload-text">Click or drag file to this area to upload</p>
        <p className="ant-upload-hint">
          Support for a single or bulk upload. Strictly prohibit from uploading company data or other
          band files
        </p>
      </Dragger>
      </span>
      <span>
      <Button
          type="link"
          data-testid="new-project-button"
          size="large"
          style={{ width: 100 }}
          onClick={() => props.handleBack() }
        >
          Back
        </Button>
        <Button
          type="primary"
          data-testid="new-project-button"
          size="large"
          style={{ width: 100, marginBottom: 50 }}
          onClick={() => props.handleUpdateAndNext(props.updateProjectDetails)}
        >
          Next
        </Button>
      </span>

      </div>

    );

Answer 1

您需要自定义antd类ant-upload.ant-upload-drag和ant-upload-list.ant-upload-list-picture. 并且，将display: flex 和设置flex-direction:row为父容器以获得所需的结果。

应用程序.js

import { Upload, Icon, message } from "antd";

const { Dragger } = Upload;

const fileList = [
  {
    uid: "-1",
    name: "xxx.png",
    status: "done",
    url:
      "https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png",
    thumbUrl:
      "https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
  },
  {
    uid: "-2",
    name: "yyy.png",
    status: "error"
  }
];

const props = {
  name: "file",
  multiple: true,
  action: "https://www.mocky.io/v2/5cc8019d300000980a055e76",
  defaultFileList: [...fileList],
  listType: "picture"
};

class App extends Component {
  render() {
    return (
      <div className="App">
        <h2 className="header">File Upload</h2>
        <Dragger {...props} className="parent">
          <p className="ant-upload-drag-icon">
            <Icon type="inbox" style={{ color: "green" }} />
          </p>
          <p className="ant-upload-text">Drag files to upload</p>
        </Dragger>
      </div>
    );
  }
}

索引.css

.App{
  padding: 50px;
  width: 700px;
  border: 2px solid green;
}
.header{
  display: flex;
  flex-direction: row;
  justify-content: center;
}
.parent{
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: center;
  border-top: 1px solid gray;

}

.ant-upload.ant-upload-drag{
width: 80%;
margin: 20px;
}
.ant-upload-list.ant-upload-list-picture{
width: 100%;
margin: 20px;
}

请查看演示并告诉我。