重构-传送文件

ゞ浴缸里的玫瑰 2021-07-24 16:09 409阅读 0赞

动画:
    	移入移出边框变色
    
    参数:
    	onLoad: PropTypes.func,			回调参数,第一个参数是上传的所有文件,每个文件包含转换后base64码的url、文件名称、文件大小、文件类型
        limit: PropTypes.number,		限制上传的文件个数,默认为9
        drag:PropTypes.bool,			是否开启拖拽上传文件,默认否
        accept:PropTypes.string,	    文件上传类型,遵循input的accept规则
        width:PropTypes.string,			宽度
        height:PropTypes.string,		高度
        borderColor:PropTypes.string,	边框色
        borderHoverColor:PropTypes.string,	hover边框色
        borderRadius:PropTypes.string,	圆角
        color:PropTypes.string,			背景颜色
        iconSize:PropTypes.string,		中间图案大小
        iconColor:PropTypes.string,	中间图案颜色

效果图:  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NDU2MA_size_16_color_FFFFFF_t_70]![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NDU2MA_size_16_color_FFFFFF_t_70 1]![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NDU2MA_size_16_color_FFFFFF_t_70 2]

![在这里插入图片描述][20201130205418926.png]代码示例:  
使用:

import React,{ useState} from 'react'
    import Upload from './upload/upload'
    
    function App(props){ 
    
      const _onLoad = function (files)
      { 
        console.log(files);
      }
      return(
    
        <div>
          <Upload drag accept={ "image/*"} limit={ 5} onLoad={  _onLoad }></Upload>
        </div>
      )
    }
    
    export default App

upload.jsx:

import React, {  useState,useCallback,useRef,useEffect } from 'react';
    import PropTypes from 'prop-types'
    import './upload.css';
    
    function App(props){ 
        
    
        
        const inputf = useRef(null);
        const contf = useRef(null);
        const [drag, setDrag ] = useState(false);
        
    
        useEffect(() => { 
           
            props.width && contf.current.style.setProperty('--width', props.width);
            props.height && contf.current.style.setProperty('--height', props.height);
            props.borderColor && contf.current.style.setProperty('--borderColor', props.borderColor);
            props.borderHoverColor && contf.current.style.setProperty('--borderHoverColor', props.borderHoverColor);
            props.borderRadius && contf.current.style.setProperty('--borderRadius', props.borderRadius);
            props.color && contf.current.style.setProperty('--color', props.color);
            props.iconSize && contf.current.style.setProperty('--iconSize', props.iconSize);
            props.iconColor && contf.current.style.setProperty('--iconColor', props.iconColor);
            
    
        },[])
    
    
        const _onClick = useCallback(() => { 
            inputf.current.click();
    
    
        }, [])
        
        const _onChange = useCallback((ev) => { 
            console.log(props.limit);
            let arr = [];
            let files = ev.target.files;
            if (Object.keys(files).length<=props.limit)
            { 
                Object.keys(files).forEach((item, index) => { 
                    let fileReader = new FileReader();
                    
                    fileReader.readAsDataURL(files[item]);
                    fileReader.onload = function (e)
                    { 
                        arr.push({ url:e.target.result,type:files[item].type,size:files[item].size,fileName:files[item].name});
                        
                        if (arr.length==Object.keys(files).length)
                        { 
                            props.onLoad(arr);
                        }
                    }  
                    
                })            
            } else { 
                // 超过最大数量文件上传限制操作
                console.log('超过最大传送文件限制');
            }
            
        const _onDrop =useCallback(function (e)
        { 
            e.preventDefault();
            e.stopPropagation();
            if (props.drag)
            { 
                let file = e.dataTransfer.files[0];
                let fileReader = new FileReader();
                fileReader.readAsDataURL(file);
                fileReader.onload = function (ev)
                { 
                    props.onLoad({ url:ev.target.result,fileName:file.name,size:file.size,type:file.type})
                }            
            }
    
        },[])
    
        const _onDragOver =useCallback(function (e)
        { 
            e.preventDefault();
            e.stopPropagation();
            
            return false;
            // console.log(e);
    
        }, [])
        
        const _onDragEnter = useCallback((function () { 
            if (props.drag)
            { 
                !drag && setDrag(true);
            }
            
            
        }), [drag])
        
        const _onDragLeave = useCallback((function () { 
            if (props.drag)
            { 
                drag && setDrag(false);
            }
            
        }),[drag])
    
     
    
    
        },[])
    
        return(
    
            <div ref={ contf} className={ `jf-upload-container jf-upload-container-notDisabled`}>
                <input accept={ props.accept?props.accept:undefined} multiple ref={ inputf} onChange={ _onChange} type="file" className='je-upload-file' />
                <i onClick={ _onClick} onDragEnter={ _onDragEnter} onDragLeave={ _onDragLeave}  onDrop={ _onDrop} onDragOver={ _onDragOver} className='iconfont icon-hao jf-upload-icon'>
                    
                </i>
            </div>
        )
    }
    
    App.propTypes = { 
        onLoad: PropTypes.func,
        limit: PropTypes.number,
        drag:PropTypes.bool,
        accept:PropTypes.string,
        width:PropTypes.string,
        height:PropTypes.string,
        borderColor:PropTypes.string,
        borderHoverColor:PropTypes.string,
        borderRadius:PropTypes.string,
        color:PropTypes.string,
        iconSize:PropTypes.string,
        iconColor: PropTypes.string,
        
    }
    
    App.defaultProps = { 
        onLoad: () => {  },
        limit:9
    }
    
    
    export default React.memo(App);

upload.css:

.jf-upload-container { 
      display: inline-block;
      box-sizing: border-box;
      margin-left: 5px;
    
      width: var(--width);
      height: var(--height);
      border: dotted 1px var(--borderColor);
      border-radius: var(--borderRadius);
      background-color: var(--color);
    
      --width: 200px;
      --height: 200px;
      --borderColor: #ccc;
      --borderHoverColor: #409eff;
      --borderRadius: 5px;
      --color: white;
      --iconSize: 20px;
      --iconColor: #8c939d;
      position: relative;
    }
    
    .jf-upload-container-notDisabled:hover { 
      border-color: var(--borderHoverColor);
      cursor: pointer;
    }
    
    .jf-upload-dragIn { 
      border-color: var(--borderHoverColor);
    }
    
    .je-upload-file { 
      width: 100%;
      height: 100%;
      outline: none;
      display: none;
    }
    
    .jf-upload-icon { 
      height: 100%;
      width: 100%;
      box-sizing: border-box;
      display: inline-block;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: var(--iconSize);
      color: var(--iconColor);
    }

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NDU2MA_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/2020113020531385.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NDU2MA==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NDU2MA_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20201130205322297.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NDU2MA==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NDU2MA_size_16_color_FFFFFF_t_70 2]: /images/20210724/59a9f539960143f8a538660c1af1812e.png
[20201130205418926.png]: /images/20210724/66cc852e16254bb6a1d5f79e2568def6.png