antd upload上传附件 【前端小白】

作为一个前端小白，对于这个antd的上传附件已经踩过很多次坑，这次不得不记录一下，这个血泪史。

对于附件上传我做了两种格式，下面是我不成熟的代码（注：后端接口不支持批量上传）：

1.附件限制上传个数，使用fileList属性控制上传附件

这里是引用 https://3x.ant.design/components/upload-cn/

这个就是单纯使用antd官方文档中的方法

uploadOnChange = (info) => {
        let fileList = [...info.fileList]
        if (fileList) {
            fileList = fileList.slice(-1);
            fileList = fileList.map(file => {
                if (file.response) {
                    file.url = file.response.url;
                }
                return file;
            });
            this.setState({
                fileList
            })
        }

    }

2.批量上传附件，使用fileList附件【这个是对上面的方法的扩展，原谅我是个笨笨的小白】

								onChange:(info)=>{
        							let fileList = [...info.fileList];
                                    let arrErr=this.state.arrErr //获取上传失败的列表
                                    fileList.map((file,index) => {
                                    if (file.response) {
                                        this.state.num++;  //批量上传 调用接口的次数
                                        var dataFile=file.response.data
                                        if(dataFile.fail.length != 0){
                                            fileList.splice(index,1)
                                            arrErr=arrErr.concat(dataFile.fail) //将每次上传失败的结果合并到arrErr中
                                            this.setState({
                                                arrErr:arrErr
                                            },()=>{
                                            //判断（调用接口次数是否和上传附件长度）文件是否已经上传完毕 若上传完 将所有失败的附件放到一个弹框中 一起显示（避免多个提示一起显示）
                                              if(this.state.num===this.state.length){
                                                    Modal.error({
                                                        title: '抱歉，您上传的以下附件未成功！',
                                                        content:(
                                                            <div>{
                                                                arrErr.map((item,index)=>{
                                                                    return <div key={index} style={{margin:'5px 0px'}}><Icon type="exclamation" style={{color:'red'}} />{item}</div>
                                                                })
                                                            }</div>
                                                        ),
                                                        okText:'知道了'
                                                    });
                                                    
                                                }
                                            })
                                        }
                                        return file
                                    }
                                 
                               });

							//（注意：上传前一定要清空，调用接口次数和上传失败列表）
								beforeUpload: (file, fileList) => {
                                    let list = []
                                    list = fileList
                                    this.setState({
                                        length: list.length,//上传文件的数量
                                        num: 0, //调用接口的次数
                                        arrErr:[]，//上传失败的列表
                                    })
                                },

3.批量上传附件，不使用fileList附件【这个和方法2类似啦】

handleUploadChange = (info) => {
        var lists = this.state.fileList
        this.setState({
            fileStatus: info.file.status,//获取当前上传附件的上传状态
            loading: true,
        })
        var files = info.file
        if (files.status === 'done') {
            // console.log(lists.length,nums.length)
            this.state.num++;//上传附加调用接口次数
            if (files.response.code === 0) {
                // message.success(`文件上传成功`);
                var list = this.state.uploadInvoiceData // 已上传的附件列表
                // list.push(files.response.data)
                files.response.data.map(item => {
                    list.push(item)
                })
                if (lists.length === this.state.num) {
                    this.setState({
                        loading: false,
                        uploadInvoiceData: list
                    })
                    if (this.state.tableErrorList.length == 0) {  //上传失败的列表为0
                        message.success(`您选择的${lists.length}张发票已成功上传。`)
                    }
                }
            } else {
                var value = {}
                value.name = files.name
                value.msg = info.file.response.msg
                this.state.tableErrorList.push(value)//上传失败 追加到tableErrorList
                if (lists.length === this.state.num) { //判断当前批量上传的数量是否和调用接口次数相等
                    this.setState({
                        errorVisible: true, //我这边使用的弹框显示的错误信息（可参照2）
                        loading: false
                    })
                }
            }

        } else if (info.file.status === 'error') {
            message.error(`文件上传失败`);
            this.setState({
                loading: false
            })
        }
    }
//最后 还是不要忘记在 **beforeUpload** 处理参数哦
beforeUpload: (file, fileList) => {
                let list = []
                list = fileList //获取上传数量

                //每次上传新的文件 清空num（调用接口次数）和上传失败的列表tableErrorList
                this.setState({
                    fileList: list,
                    num: 0, 
                    tableErrorList: [],
                })
            },

大概就是这个样子啦，希望能给同小白的你们有一些些帮助哦。