react中上传文件或者文件夹_react input 手机文件夹上传-优快云博客

本文介绍如何在React应用中结合AntD组件库实现文件及文件夹的上传功能，通过具体的代码示例展示了使用自定义菜单项进行文件选择，并触发上传事件的方法。

react和UI插件antd：

render() {
  const menu = (<Menu className={'upload-menu-select'}>
    <Menu.Item key='1'>
        <label className={'upload-menu-select-item'} style={{cursor: "pointer"}} htmlFor="files-up">上传文件</label>
        <input type="file" multiple accept="*/*" style={{display: "none"}} id="files-up"
               onChange={() => this.multipartUpload("files-up")}/>
    </Menu.Item>
    <Menu.Item key='2'>
        <label className={'upload-menu-select-item'} style={{cursor: "pointer"}}
               htmlFor="folder-up">上传文件夹</label>
        <input type="file" multiple accept="*/*" style={{display: "none"}} id="folder-up" webkitdirectory="true"
               onInput={() => this.multipartUpload("folder-up")}/>
    </Menu.Item>
 </Menu>);

 return (<Dropdown overlay={menu} disabled={hasSelected}>
    <Button
        className={'upload-btn'}
        type="primary"
        htmlFor="files-up"
        style={cursor: "pointer"}}>
        <img src={require('../assets/img/icon-upload.png')} alt=""/>上传
        <input className="plupload btn-upload-dss" value="" multiple={true}
               type={hasSelected ? '' : "file"} id="file"
               onChange={() => this.multipartUpload("file")}/>
    </Button>
 </Dropdown>)
}

/**文件上传触发事件/

/*文件开始上传前大小判断以及请求callbackUrl*/

/*最后触发上传文件或者文件夹*/