对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 遇到的值得分享的小问题，欢迎各位小姐姐大哥哥点评，小白作品，不喜勿喷哦！！！

持续更新中。。。