上传图片文件

最新推荐文章于 2024-08-24 12:37:57 发布

程序员会变秃头

最新推荐文章于 2024-08-24 12:37:57 发布

阅读量75

点赞数 1

文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/m0_74199622/article/details/140558264

版权

    <Upload
          name="image"
          action="http://toutiao.itheima.net/v1_0/upload" //接口
          listType="picture-card"
          fileList={fileList}
          onPreview={()=>{}}
          onChange={handleChanges}
        >
          {fileList.length >= 8 ? null : uploadButton}
        </Upload>
        {previewImage && (
          <Image
            wrapperStyle={{
              display: "none",
            }}
            preview={{
              visible: previewOpen,
              onVisibleChange: (visible) => setPreviewOpen(visible),
              afterOpenChange: (visible) => !visible && setPreviewImage(""),
            }}
            src={previewImage}
          />
        )}

  // 图片上传


  const [previewOpen, setPreviewOpen] = useState(false);
  const [previewImage, setPreviewImage] = useState("");
  const [fileList, setFileList] = useState([]);


  console.log(fileList,'222');
  const handleChanges = ({fileList }) => setFileList(fileList);


  const uploadButton = (
    <button
      style={{
        border: 0,
        background: "none",
      }}
      type="button"
    >
      <PlusOutlined />
      <div
        style={{
          marginTop: 8,
        }}
      >
        上传图片
      </div>
    </button>
  );