react写图片上传

import React, { useState } from 'react';

import { Upload } from 'antd';

//组件总览 - Ant Design (antgroup.com)

//复制组件上传 进行修改为图片上传 上传不得超过五个

import ImgCrop from 'antd-img-crop';

import { Button, message } from 'antd';

const App = () => {

  let [flag,setflag]=useState(true)

  // 图片类型 不符合则上传失败

  const props = {

  beforeUpload: (file) => {

    const isPNG = file.type === 'image/png'||file.type === 'image/jpeg'

    if (!isPNG) {

      message.error(`${file.name} 上传失败`);

    }

    

    return isPNG || Upload.LIST_IGNORE;

  },

  onChange: (info) => {

    console.log(info.fileList);

  },

};

  const [fileList, setFileList] = useState([

    

  ]);

  const onChange = ({ fileList: newFileList }) => {

    setFileList(newFileList);

  };

  const onPreview = async (file) => {

    let src = file.url;

    if (!src) {

      src = await new Promise((resolve) => {

        const reader = new FileReader();

        reader.readAsDataURL(file.originFileObj);

        reader.onload = () => resolve(reader.result);

      });

    }

    const image = new Image();

    image.src = src;

    const imgWindow = window.open(src);

    imgWindow?.document.write(image.outerHTML);

  };

  return (

    <div>

      {/* 点击上传出图片文件 */}

      <button onClick={()=>setflag(!flag)}>上传</button>

      {/* 连接后台OSS服务器 */}

      {

        !flag?<ImgCrop rotationSlider>

      <Upload

        {...props}

        action="http://localhost:3000/upload"

        listType="picture-card"

        fileList={fileList}

        onChange={onChange}

        onPreview={onPreview}

      

      >

        {fileList.length < 5 && '+ Upload'}

      </Upload>

    </ImgCrop>:""

      }

    </div>

  );

};

export default App;