对antd Upload使用的一点总结

前言

antd是阿里爸爸出的，质量绝对是有保证的，组件的使用起来的温馨感和方便度没必要多言，先给阿里爸爸点个赞！！！ 话很少说，直接进入正题。

1.赋值问题

以前的写法

onChange: (file) => {
                    this.setState({
                        fileList: file.fileList
                    })    
            },
复制代码

目前写法

onChange: (file) => {
                  //  上传图片的状态会自动更新，因此不论返回什么文件状态都应该在界面中展现，无需考虑status是成功仍是失败仍是进行中。
                  //  可是beforeUpload 若是返回是false，file的fileList就会返回当前上传的文件,以前的fileList数据此时是获取不到的，此时不该当对state的fileList赋值。且file.file是不含status状态的，可根据是否含有status进行判断。
                if('status' in file.file){
                    this.setState({
                        fileList: file.fileList
                    })    
                }
            },
复制代码

很明显的差异就是多了一个判断，大神略过，不少小伙伴可能也是下面这种写法，就是为了不上传过程当中一旦beforeUpload返回false致使以前上传的文件所有丢失，前功尽弃。做为小白的我以前却忽略了这个问题，老是采用第一种写法，没了就没了，任去留，体验什么的彻底无论，幸好即便醒悟，敢紧止错。

2.校验问题

相信使用这个组件大部分状况下都是与Form表单搭配使用的，上传头像可单独使用。
复制代码

<FormItem {...rideoItemLayout} label="上传图片：" className={'addImg'}>
              {getFieldDecorator('radio', {
                initialValue: [],
                rules:  [{required: true, message: '请上传'}]
              })(
                  <Upload
                    name="file"
                    listType="picture-card"
                    className="avatar-uploader"
                    accept='image/*'
                    fileList={fileList}
                    action={`${apiUrl}/manages/file/uploadFile`}
                    beforeUpload={beforeUpload}
                    onChange={this.handleChangeImg}
                    onPreview={this.handlePreview}
                  >
                    {fileList.length >= 30 ? null : uploadButton}

                  </Upload>
                  <span style={{ height: '100%' }}>{textAreas}</span>
                  <Modal visible={previewVisible} footer={null} onCancel={this.handleCancel}>
                    <img alt="example" style={{ width: '100%' }} src={previewImage} />
                  </Modal>
              )}
            </FormItem>    
复制代码

这样当提交表单的时候获取的表单值是这样的
复制代码

当你删除这张图片时（在职有一张图片的状况下）,发现再次提交表单，并无校验提示图片是未上传的，缘由就是删除图片以后Upload还会给form提供这样的值

； 这样的话表单校验仍是经过的，也就不会有什么提示。表单默认会在获取空数组的状况下提示，但问题是咱们不想经过transform修改未校验以前的值，阿里大神们仍是提供了自定义提供校验状态的办法，validateStatus，没错，佩服阿里大哥哥小姐姐的框架设计。

<FormItem {...rideoItemLayout} label="上传图片：" className={'addImg'}>
              {getFieldDecorator('radio', {
                initialValue: [],
                rules:fileList.length == 0 ? [
                            {
                                required: required, message: '请上传',
                                validateStatus:fileList.length == 0 &&  'warning'
                            } 
                         ] : 
                         [
                            {
                                required: required, message: '请上传'
                            }
                         ]
              })(
                  <Upload
                    name="file"
                    listType="picture-card"
                    className="avatar-uploader"
                    accept='image/*'
                    fileList={fileList}
                    action={`${apiUrl}/manages/file/uploadFile`}
                    beforeUpload={beforeUpload}
                    onChange={this.handleChangeImg}
                    onPreview={this.handlePreview}
                  >
                    {fileList.length >= 30 ? null : uploadButton}

                  </Upload>
                  <span style={{ height: '100%' }}>{textAreas}</span>
                  <Modal visible={previewVisible} footer={null} onCancel={this.handleCancel}>
                    <img alt="example" style={{ width: '100%' }} src={previewImage} />
                  </Modal>
              )}
            </FormItem>  
复制代码

这样就能够解决提示问题啦！！！
 
 目前这就是我用antd 遇到的值得分享的小问题，欢迎各位小姐姐大哥哥点评，小白做品，不喜勿喷哦！！！
复制代码

持续更新中。。。