react-antd中使用Upload实现图片裁剪-上传-预览的功能

Beiyux

于 2022-04-01 07:30:00 发布

阅读量3k

点赞数

CC 4.0 BY-SA版权

分类专栏： React 文章标签： react.js javascript 前端

本文链接：https://blog.youkuaiyun.com/weixin_45745641/article/details/123886519

本文介绍了在React应用中利用Ant Design（antd）框架，结合antd-img-crop插件，实现图片上传、裁剪及预览功能的详细步骤。通过设置upload组件的相关属性如action、listType、fileList等，实现了图片处理的基本流程，并指出可以通过自定义功能扩展至文件上传等场景。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前言

使用react中antd实现图片的上传裁剪和预览，记录一下实现过程，希望能对大家有帮助

实现

我们这里用到的是antd框架，实现
图片上传的功能我们需要安装一个插件antd-img-crop

yarn add antd-img-crop

然后就可以进行使用：

import React, {
   
    memo, useState } from 'react'
import {
   
    Upload } from 'antd'
import ImgCrop from ' 
'

export default memo(function Index() {
   
   
  const [fileList, setFileList] = useState([
    {
   
   
      uid: