React upload component combination AntD write UPLOAD

upload upload component which action is to adjust the interface to get the picture url address

setImg get url, click Save reached background

 

action picture upload method

// upload an avatar 
    changeImg = info => {
         IF (info.file.status === "Uploading" ) {
             the this .setState ({loading: to true });
             return ; 
        } 
        IF (info.file.status === " DONE " ) { 
            the let { 
                userStore: setImg} { 
            } = the this .props; 
            setImg ( info.file.response.data.url ); // get the data according to the actual end interface data structure
             the this .getBase64 (info.file.originFileObj , imageUrl =>
                 the this .setState ({ 
                    imageUrl,
                    loading: false
                })
            );
        }
    };


    getBase64 = (img, callback) => {
        const reader = new FileReader();
        reader.addEventListener("load", () => callback(reader.result));
        reader.readAsDataURL(img);
    };


    beforeUpload = file => {
        const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png';
        if (!isJpgOrPng) {
            message.error('You can only upload JPG/PNG file!');
        }
        const isLt2M = file.size / 1024 / 1024 < 2;
        if (!isLt2M) {
            message.error('Image must smaller than 2MB!');
        }
        return isJpgOrPng && isLt2M;
    };

render

                               <FormItem {... formItemLayout} label = { ' head'}> 
                                    {getFieldDecorator ( 'Avatar' , { 
                                        the initialValue: Avatar 
                                    }) (


                                         < the Upload 
                                            Accept =. "JPG, .jpeg, .png" 
                                            listType = "Picture-Card " 
                                            showUploadList = { to false } 
                                            Action =" /staffs/UploadFile.json "// backend provides an interface to upload, return url
                                            beforeUpload={this.beforeUpload} f
                                            onChange={this.changeImg}
                                            name="file"
                                            headers={{
                                                Authorization: sessionStorage.authToken
                                            }}
                                        >
                                        {imageUrl ? <img src={imageUrl} alt="avatar" style={{ width: '100%' }} /> : uploadButton}
                                        </Upload>
                                    )}
                                     <Span> { 'Support JPG / GIF / PNG format'} </ span> 
                                </ the FormItem>