Antd修改Upload图片框大小

最新推荐文章于 2024-07-11 15:29:37 发布

米莉亚姆·奥莱恩

最新推荐文章于 2024-07-11 15:29:37 发布

阅读量97

点赞数 2

分类专栏：前端文章标签： typescript 前端

本文链接：https://blog.csdn.net/2301_79150070/article/details/140322792

版权

前端专栏收录该内容

7 篇文章 0 订阅

订阅专栏

              <Upload
                  className={s.mineUpload}
                  name="file"
                  accept=".jpg, .jpeg, .png, .gif, .bmp, .webp"
                  customRequest={handleUpload}
                  listType="picture-card"
                  fileList={fileList}
                  maxCount={1}
                  multiple={false}
                  beforeUpload={beforeImgUpload}
                  onChange={handleImgChange}
                  onPreview={handleImgPreview}
                >
                  {coverFileList.length === 0 && '+ 上传封面'}
                </Upload>

用className={s.mineUpload}给组件覆盖对应的style即可

.mineUpload :global .ant-upload-list-item-container {
    width: 180px !important;
    height: 180px !important;
}

.mineUpload :global .ant-upload.ant-upload-select {
    width: 180px !important;
    height: 180px !important;
}

.mineUpload :global .ant-upload-list-item-thumbnail .ant-upload-list-item-image {
    object-fit: cover !important;
}