Home

react-file-upload-mobile

---

React Mobile File Upload Component

Screenshots

上传模式

展示模式

install

Usage

    import ReactFileUploadMobile from 'react-file-upload-mobile';

    const [image, setImage] = useState();
    const [imageName, setImageName] = useState();
    const clearAttachment = () => {
        setImage('');
        setImageName('');
    }
    const onUpload = (file){
        // upload api
    }
    const preview = (){
        // preview picture
    }
    // 上传模式
    <ReactFileUploadMobile
        fileUrl={image}
        fileName={imageName}
        displayOnly={false}
        preview={preview}
        compressImg={0.8}
        onFileDelete={clearAttachment}
        onFileUpload={onUpload}
    />
    // 展示模式
    <ReactFileUploadMobile
        fileUrl={'//xxx.com/xxx.jpg'}
        fileName={'xxx.jpg'}
        preview={preview}
        download={true}
        displayOnly={true}
    />

API

Properties	Descrition	Type	Default
wrapCls	外部 className	string	-
fileUrl	文件绝对路径	string	-
fileName	文件名	string	-
displayOnly	是否为纯展示的情况	boolean	false
compressImg	图片压缩率，仅当displayOnly为false时候生效,使用 compressorjs 进行压缩，默认使用 0.8 压缩率，0-1 之间的一位小数，0 或 1 为不压缩	number	0.8
download	是否支持下载附件 仅当displayOnly为true时候生效	boolean	false

Methods

• preview() - 点击缩略图回调,用于查阅大图等功能,可回调掉中使用 react-image-lightbox 进行大图查看
• onFileDelete() - 点击删除按钮后的回调 仅当displayOnly为false时候生效
• onFileUpload(file: File) - 文件上传的回调 仅当displayOnly为false时候生效

Development

修改source下的文件，npm run build即可编译，其他功能尚未实现

TODOs

• 添加参数：文件名长度限制
• 添加参数：文件大小限制
• 添加参数：文件后缀限制
• 添加参数：压缩比例
• 完善文档：默认参数

Example

Tips

Test Case

Coverage

License

react-file-upload-mobile is released under the MIT license.