對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 遇到的值得分享的小問題，歡迎各位小姐姐大哥哥點評，小白做品，不喜勿噴哦！！！
複製代碼

持續更新中。。。