React后台管理手動封裝圖片上傳組件

分為兩個文件夾，index.js(邏輯文件)　　　　styled.js(樣式文件)

 

index.js文件，編寫完成之后在對應的地方引入即可

 
          
            import React from "react" 
           
          
            import { UploadContainer } from "./styled" 
           
          
            import { Icon ,message} from "antd" 
           
          
            import { fetch as fetchPro } from "whatwg-fetch" 
           
          
            class Upload extends React.Component { 
           
          
                constructor(props) { 
           
          
                    super(props) 
           
          
                    this.state = { 
           
          
                        imgUrl: "" 
           
          
                    } 
           
          
                    if (this.props.value) { 
           
          
                        this.state.imgUrl = this.props.value 
           
          
                    } 
           
          
                } 
           
          
                render() { 
           
          
                    let { imgUrl } = this.state 
           
          
                    return ( 
           
          
                        <UploadContainer> 
           
          
                            <input type="file" onChange={this.handleUpdate.bind(this)} ref="files" /> 
           
          
                            <div className="imgContent"> 
           
          
                                {imgUrl ? <img src={imgUrl} /> : <Icon type="plus" style={{ fontSize: 26 }} />} 
           
          
                            </div> 
           
          
                        </UploadContainer> 
           
          
                    ) 
           
          
                } 
           
          
                async handleUpdate() { 
           
          
                    let fileImg = this.refs.files.files[0]; 
           
          
 
          
                    let formData = new FormData() 
           
          
 
          
                    formData.append("filesImg", fileImg)//第一個參數為后端規定字段，第二個參數時需要上傳的圖片 
           
          
 
          
                    let data = await fetchPro("/ajax/upload/files", { 
           
          
                        method: "post", 
           
          
                        body: formData 
           
          
                    }).then(res => res.json())//第一個參數為地址,第二個參數為配置項 
           
          
                     
           
          
                    if(data.data.urlPath){ 
           
          
                        this.setState({ 
           
          
                            imgUrl:data.data.urlPath 
           
          
                        }) 
           
          
                    }else{ 
           
          
                        message.error(data.data.info) 
           
          
                    } 
           
          
                } 
           
          
            } 
           
          
 
          
 
          
            export default Upload 
           
         

 

styled.js文件

import styled from "styled-components"

export const UploadContainer = styled.div`
    width:110px;
    height:110px;
    border:1px dashed #ccc;
    position:relative;
    input{
        opacity:0;
        width:110px;
        height:100%;
        position:absolute;
        left:0;
        top:0;
        z-index:2;
    }
    .imgContent{
        padding:5px;
        width:100%;
        height:100%;
        position:absolute;
        left:0;
        top:0;
        display:flex;
        justify-content:center;
        align-items:center;
        img{
            width:100%;
            height:100%;
        }
    }
`