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. 有什么建议可以提出来哦!


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM