React 实现图片的上传和裁剪

本文主要使用Hook + Aut + react-cropper, 完成pc端图片的上传和裁剪.

图片的上传

1. 首先项目如果未安装aut Design,则需要先安装. 下面方法任选一种安装即可.

    npm install antd --save
    yarn add antd

2. 在项目中引入.

    import { Upload } from 'antd';

3. 代码..

// 检测上传的图片
    const beforeUploadImg = (file) => {
        const isLt10M = file.size / 1024 / 1024 < 5;
        if (!isLt10M) {
            // 添加文件限制
            message.error({ content: '文件大小不能超过5M' });
            return false;
        }
    }

// 上传图片的属性
    const uploadProps = {
        name: 'file',
        action: '/wxstore_service/miniProgramShop/uploadImgToMaterialSpaces', // 上传图片的路径
        showUploadList: false, // 是否显示列表
        multiple: false, // 一次是否可以上传多个文件
        withCredentials: true, // 上传请求时是否携带 cookie
        beforeUpload: beforeUploadImg, // 上传文件之前的钩子
        onChange(info) {
            if (info.file.status !== 'uploading') {
                if (IsEmpty(info.file.response)) {
                //info.file.response 为上传后接口返回的数据
                    return;
                }
                
                // 这里可以执行上传成功后的操作啦.....
                console.log('上传图片后返回的路径为: ', info.file.response);
            }
        }
    };

    <Upload {...uploadProps}>
        <span>大小不超过5M</span>
        <img alt="上传" className="upload-icon" src={upLoadSvg} />
    </Upload>

图片的裁剪

1. 安装 react-cropper

   npm install --save react-cropper

2. 图片的裁剪组件;

import React, { Component } from 'react';
import axios from 'axios';
import { Modal, message } from 'antd';
import Cropper from 'react-cropper';
import '../../../node_modules/cropperjs/dist/cropper.css';

class CropperCon extends Component {
    constructor(props) {
        super(props);
        this.state = {
        }
    }

    // 确认裁剪
    confirmCropper = () => {
        this.cropper.getCroppedCanvas().toBlob(async (blob) => {
            const { srcCropper } = this.props;
            // 图片name添加到blob对象里
            blob.name = `${new Date().getTime()}.png`;
            // 创造提交表单数据对象
            const formData = new FormData();
            // 添加要上传的文件
            formData.append('file', blob, blob.name)
            // 发送请求
            axios.post('/wxstore_service/miniProgramShop/uploadImgToMaterialSpaces',formData)
                .then((res) => {
                console.log(res)
                    // 可以执行上传成功后的操作拉!!!!
                }).catch(() => {
                    message.error('上传失败');
                })
        })
    }

    onCropperInit=(cropper) => { this.cropper = cropper }

    render () {
        const { visible, srcCropper } = this.props;
        return (
            <Modal
                width={742}
                visible={visible} // 是否显示
                closable={false}
            >
                <div className="previewHeader">
                    <Cropper
                            style={{ height: 286 }}
                            aspectRatio={1} //固定图片裁剪比例 1为正方形
                            src={srcCropper}// 要裁剪的图片的路径
                            viewMode={1} // 定义cropper的视图模式
                            zoomable // 是否允许放大图像
                            guides={false} // 显示在裁剪框上方的虚线
                            background={false} // 是否显示背景的马赛克
                            rotatable // 是否旋转
                            // ref='cropper'//在官方更新之后ref不在支持，应写为以下
                            onInitialized={this.onCropperInit.bind(this)}
                     />
                    <div className="btn-con">
                        <span className="title">图片裁剪</span>
                        <div className="cropper-btn">
                            <div className="cancel" onClick={() => this.props.onCloseModal()}>取消</div>
                            <div className="confirm" onClick={this.confirmCropper}>确定裁剪</div>
                        </div>
                    </div>
                </div>
            </Modal>
        )
    }
}

export default CropperCon;