antd Upload组件实现手动上传

重构博客网站时需要实现添加文章功能，其中除了文章名、分类、作者之外还有封面图片，antd提供的Upload组件选择图片后直接传给后端，这里的场景是图片连同其他文章信息一并传给后端。网上大多推荐用customRequest方法，但antd官方并未对此方法给出太多的说明。
此外antd还提供了一个beforeupload方法。于是博主打算用曲线救国的方法获取图片，正所谓水平不够，骚操作来凑。

顾名思义，beforeUpload即上传前的操作，我们只需在上传前将图片对象赋值给事先定义好的变量，然后返回false，终止默认的上传行为。

Class写法：

import React, { Component } from 'react'
import { Button, Upload } from 'antd';
import { UploadOutlined } from '@ant-design/icons';


export default class Blogupload extends Component {

    constructor(props) {
        super(props);
        this.state = { 
            uploadFile: {}
        };
    }

    showUploadFile = () => {
        console.log(this.state.uploadFile);
    }

    render() {
        // upload控件配置
        const props = {
            showUploadList: true,
            action:'',
            onRemove: file => {
                this.setState({ uploadFile: {} });
            },
            
            // 上传动作前将图片赋值给uploadFile，返回false终止上传
            beforeUpload: file => {
                this.setState({ uploadFile: file });
                return false;
            },
          };

        return (
            <div>
                <Upload {...props}>
                    <Button  icon={<UploadOutlined />}>
                        点击上传
                    </Button>
                </Upload>
                <Button onClick={this.showUploadFile}>查看uploadFile数据</Button>
            </div>
        )
    }
}

Hooks写法：

import React, { useState } from "react";
import { Button, Upload } from 'antd';
import { UploadOutlined } from '@ant-design/icons';


export function Blogupload() {

    const [uploadFile, setUploadFile] = useState({});

    function showUploadFile() {
        console.log(uploadFile);
    }

    // upload控件配置
    const props = {
        showUploadList: true,
        action: '',
        onRemove: file => {
            setUploadFile({})
        },

        // 上传动作前将图片赋值给uploadFile，返回false终止上传
        beforeUpload: file => {
            setUploadFile(file);
            return false;
        },
    };

    return (
        <div>
            <Upload {...props}>
                <Button icon={<UploadOutlined />}>
                    点击上传
                </Button>
            </Upload>
            <Button onClick={showUploadFile}>查看uploadFile数据</Button>
        </div>
    )
}

效果：

简单方便，非常的银杏

原文链接：https://www.jhxblog.cn/article/?articleid=25