ant design (antd) Upload組件傳入url 給出url 的簡單封裝

本文出自：

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>