ant design (antd) Upload组件传入url 给出url 的简单封装

最新推荐文章于 2024-09-03 18:25:53 发布

wyk304443164

最新推荐文章于 2024-09-03 18:25:53 发布

阅读量1.7w

点赞数 2

本文链接：https://blog.csdn.net/wyk304443164/article/details/71217674

版权

前端专栏收录该内容

44 篇文章 2 订阅

订阅专栏

本文出自：

http://blog.csdn.net/wyk304443164

参数都在

/**
 * Created by wuyakun on 2017/3/20.
 */

import React from 'react';
import {Upload, Icon, Modal, message} from 'antd';
import './uploadManyView.less';
import API_URL from '../../../common/url';
import common from '../../../common/common';

/**
 * 几个注意点：
 * 1.handleUpload返回的成功与失败,需要自行判断
 * 2.接收参数为array[{uid,url}]
 * 3.吐出来的也是array
 * 4.给我通过value(看下方fileList)
 * 5.吐出去通过this.props.onChange(看下方handleChange())
 */

class PicturesWall extends React.Component {

    state = {
        previewVisible: false,
        previewImage: '',
        length: this.props.length,
        maxFileSize: this.props.maxFileSize ? this.props.maxFileSize : 2,
        fileList: this.props.value instanceof Array ? this.props.value : [],

        action: API_URL.IMAGE_ACTION,
        appid: API_URL.APP_ID,
        secret: API_URL.SECRET,
        imageHead: API_URL.IMAGE_URL_HEAD,
    };

    /**
     * 关闭预览
     */

    handleCancel = () => {
        this.setState({previewVisible: false});
    };

    /**
     * 查看预览
     * @param file
     */

    handlePreview = (file) => {
        this.setState({
            previewImage: file.url || file.thumbUrl,
            previewVisible: true,
        });
    };

    /**
     * 处理图片更新
     * @param e
     */

    handleChange = (e) => {
        let fileList = this.handleUpload(e);
        this.props.onChange(fileList);
    };

    /**
     * 处理更新
     * @param e
     * @returns {*}
     */

    handleUpload = (e) => {
        //再进行实际筛选，其实上面那一行没有用
        let fileList = e.fileList.map(file => {
            if (file.response) {
                //这个地方是上传结束之后会调用的方法，这边是判断success!!!
                if (file.response.success) {
                    return this.filter(file);
                }
            }
            return file;
        });
        this.setState({fileList: fileList});
        return fileList;
    };

    /**
     * 过滤服务器返回的数据
     * @param file
     */

    filter = (file) => {
        const {name, response, uid, status} = file;
        return {name, url: response.data, uid, status};
    };

    /**
     * 上传之前的验证
     */

    beforeUpload = (file) => {
        const maxFileSize = this.state.maxFileSize;
        if (maxFileSize) {
            const isLtMax = file.size / 1024 / 1024 < maxFileSize;
            if (!isLtMax) {
                message.error(`文件大小超过${maxFileSize}M限制`);
            }
            return isLtMax;
        }
    };

    render() {
        const {previewVisible, previewImage, appid, secret} = this.state;
        let fileList = this.state.fileList;
        if (fileList.length > 0) {
            fileList.map((file, i) => {

                if (!common.startsWith(file.url, 'http://')) {
                    file.url = `${this.state.imageHead}${file.url}`;
                }
            });
        }

        //一共有多少个图片
        const uploadButton = fileList.length >= this.props.length ? null : (
            <div>
                <Icon type="plus"/>
            </div>
        );

        // showUploadList={false} 加了就显示不了
        const props = {
            action: this.state.action,
            fileList: fileList,
            data: {
                appid: appid,
                secret: secret,
            },
            headers: {'X-Requested-With': null},
            // accept: "image/*",
            accept: "image/jpg,image/jpeg,image/png,image/bmp",
            onChange: this.handleChange,
            beforeUpload: this.beforeUpload,
            onPreview: this.handlePreview,
            listType: "picture-card",
        };

        return (
            <div className="clearfix">
                <Upload
                    {...props}
                >
                    {fileList.length >= this.state.length ? null : uploadButton}
                </Upload>
                <Modal visible={previewVisible} footer={null} onCancel={this.handleCancel}>
                    <img alt="example" style={{width: '100%'}} src={previewImage}/>
                </Modal>
            </div>
        );

    }
}

export default PicturesWall;

这样使用：

{/*公众号二维码*/}
                    <FormItem
                        style={{display: 'none'}}
                        {...uploadLayout}
                        label="公众号二维码"
                        extra="建议尺寸100*100大小不超过2MB，上传后请至公众号管理进行公众号绑定">
                        {getFieldDecorator('qrcodeURL')(
                            <UploadManyView length={1}/>
                        )}
                    </FormItem>