限制reactjs中图片的上传数量答案

【问题标题】：Limit the upload number of image in reactjs限制reactjs中图片的上传数量
【发布时间】：2020-10-27 11:39:27
【问题描述】：

我有一个应用程序，用户可以在其中上传他们的图片。

import React, { useState } from "react";
import { Upload, Button, Form, message } from "antd";

const Uploadd = ({ field }) => {
  const props = {
    name: "file",
    listType: "picture",
    headers: {
      "Access-Control-Allow-Credentials": "true"
    },
    action: "https://httpbin.org/post",
    onChange: info => {
      console.log(info.file.thumbUrl);

      const { status } = info.file;
      if (status === "done") {
        message.success(`${info.file.name} file uploaded successfully.`);
        console.log(info.fileList);
      } else if (status === "error") {
        message.error(`${info.file.name} file upload failed.`);
      }
    }
  };
  const normFile = e => {
    console.log("Upload event:", e);

    if (Array.isArray(e)) {
      return e;
    }
    return e && e.fileList;
  };
  return (
    <div>
      <Form.Item
        {...field}
        name={[field.name, "img"]}
        className="upload-img"
        fieldKey={[field.fieldKey, "img"]}
        valuePropName="fileList"
        getValueFromEvent={normFile}
        rules={[
          {
            required: false,
            message: "Missing speaker image"
          }
        ]}
      >
        <Upload {...props}>
          <Button>ADD IMAGE</Button>
        </Upload>
      </Form.Item>
    </div>
  );
};

export default Uploadd;

该应用程序可以工作，但我想通过添加上传图像的限制来自定义它。现在，如果用户添加超过 1 个图像，每个图像都会出现，但我只想显示最后一个图像，所以最后只会显示一个图像。我在 antd 文档上找到了如何限制图片数量：https://codesandbox.io/s/wchbb
但无法弄清楚如何在我的组件中实现文档中的数据。
有人可以帮助我实现我想要的吗？
演示：https://codesandbox.io/s/throbbing-feather-pyurt?file=/Uploadd.js:0-1327

【问题讨论】：

标签： reactjs

【解决方案1】：

由于您使用antd上传文件，您可以使用maxCount来限制上传文件的数量。当 maxCount 为 1 时将替换当前的。

<Upload
     style={{ width: '100%' }}
     name="imageName"
     accept="image/*"
     customRequest={uploadImage}
     onRemove={()=> setAttachment([])}
     progress={progress}
     fileList={attachment}
     listType="picture"
     maxCount={1}
>
</Upload>

【讨论】：