antd 上传组件

最新推荐文章于 2024-05-14 11:22:12 发布

在路上等

最新推荐文章于 2024-05-14 11:22:12 发布

阅读量213

点赞数

分类专栏： antd 文章标签： react.js

本文链接：https://blog.csdn.net/weixin_42327537/article/details/132031371

版权

antd 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

该代码示例展示了如何在React应用中利用antd的Upload组件和antd-img-crop库实现图片上传、预览以及缩放、旋转和纵横比调整功能。组件配置包括zoomSlider、rotationSlider和aspectSlider等选项。

摘要由CSDN通过智能技术生成

链接

zoomSlider 缩放滑块

rotationSlider：旋转滑块

aspectSlider：纵横比滑块

showGrid:显示网格

import { Upload } from 'antd';
import ImgCrop from 'antd-img-crop';
import type { RcFile, UploadFile, UploadProps } from 'antd/es/upload/interface';
import React, { useState } from 'react';
export default function ImgageCrop() {
    const [fileList, setFileList] = useState<UploadFile[]>([
        {
          uid: '-1',
          name: 'image.png',
          status: 'done',
          url: '',
        },
      ]);
    
      const onChange: UploadProps['onChange'] = ({ fileList: newFileList }) => {
        setFileList(newFileList);
      };
    
      const onPreview = async (file: UploadFile) => {
        let src = file.url as string;
        if (!src) {
          src = await new Promise(resolve => {
            const reader = new FileReader();
            reader.readAsDataURL(file.originFileObj as RcFile);
            reader.onload = () => resolve(reader.result as string);
          });
        }
        const image = new Image();
        image.src = src;
        const imgWindow ='750px';
        imgWindow?.document.write(image.outerHTML);
      };
    
  return (
    <div>
      {/* zoomSlider 缩放滑块 rotationSlider：旋转滑块  aspectSlider：纵横比滑块 showGrid:显示网格*/}
         <ImgCrop modalTitle={'ceshi'} modalWidth={700} maxZoom={1} minZoom={1} rotationSlider={false} zoomSlider={ false } aspectSlider={false} >
            <Upload
                action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
                listType="picture-card"
                fileList={fileList}
                onChange={onChange}
                onPreview={onPreview}
            >
        {fileList.length == 1 && '+ Upload'}
      </Upload>
    </ImgCrop>
    </div>
  )
}