react+antd自定义上传文件,自定义控制上传文件个数-upload

  1. import React from 'react'; import { Upload, } from 'antd'; class upload extends React.Component { constructor(props) { super(props) this.state = { fileList:[], //文件列表
     }; } // 上传以前事件
        beforeUpload = (file) => { var fileArr = []; //获取新的上传列表
     fileArr.push(file); //进行赋值保存
         this.setState(preState => ({ fileList:fileArr, uploadPath:'' })) } // 文件上传改变事件
        updateChange = (info) => { if (info.file.status === 'done') { //上传成功后将后台返回来的文件地址进行获取--info.file.response
               if (info.file.response) { this.setState(preState => ({ uploadPath : info.file.response.Data, }) ) } message.success('上传成功!'); } else if (info.file.status === 'error') { //上传失败进行提示
                message.error('上传失败!'); } } // 移除文件
        removeFile = () => { this.setState(preState => ({ fileList:[], uploadPath : ‘’ }) ) } render() { const { fileList, } = this.state; return ( <div>
                   
                      
                      
                
                                <Upload accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet,application/vnd.ms-excel,"   //上传文件类型--这个是excel类型
                                action = {‘http://dbsahdfff.com/api/upload’} 上传文件地址
                                fileList = {fileList}   //上传文件列表
                                beforeUpload={this.beforeUpload}   //上传以前触发事件
                                onChange={this.updateChange}   //上传状态改变事件
                                onRemove = {this.removeFile}   //移除文件事件
                               >
                                    <div>上传文件</div>
                                </Upload>
                </div>
     ) } } export default upload

     

  2. 有什么建议能够提出来哦!
相关文章
相关标签/搜索