ant design Upload元件 踩的坑

根據項目需求，可能要上傳多張照片，是以我選擇了 ant Upload 元件中 照片牆 部分 的代碼塊。

這裡用到了上傳成功後的預覽、删除

隻要用到的方法

onChange 上傳中、完成、失敗都會調用這個函數。

onPreview 預覽

斜體樣式在項目中我遇到的問題是以上在上傳中，點選确定，圖檔才顯示；

斜體樣式說明圖檔我上傳成功了，我隻是沒有對圖檔上傳成功後做處理；

是以這裡我用了 status === ‘done’ 來做判斷，loading 改變

//轉base64`
function getBase64(file) {
    return new Promise((resolve, reject) => {
        const reader = new FileReader();
        reader.readAsDataURL(file);
        reader.onload = () => resolve(reader.result);
        reader.onerror = error => reject(error);
    });
}
//上傳之前 隻限圖檔
function beforeUpload(file) {
    const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png' || file.type === 'image/gif';
    if (!isJpgOrPng) {
      message.error('你隻能上傳 JPG/PNG/GIF 的檔案!');
    }
    const isLt2M = file.size / 1024 / 1024 < 2;
    if (!isLt2M) {
      message.error('Image must smaller than 2MB!');
    }
    return isJpgOrPng && isLt2M;
  }

	 constructor(props) {
	        super(props);
	        this.state = {
	            previewVisible: false,
	            previewImage: '', //預覽
	            fileList: [], //上傳檔案清單
	            baseimg: '',
	            loading: false,  //上傳 loading
	        }
   }
	render() {
		 const {   handlePreview, previewVisible, previewImage, fileList,
	            handleChange, handleCancelPic,  }, 
	        } = this.props;
	        //上傳按鈕
	        const uploadButton = (
	            <div>
	                <Icon type="plus" />
	                <div className="ant-upload-text">Upload</div>
	            </div>
	        );
		return (
		<div>
                <Upload
                     action="www.baidu.com"
                     listType="picture-card"
                     fileList={fileList}
                     onPreview={handlePreview}
                     onChange={handleChange}
                 >
                     {fileList.length >= 1 ? null : uploadButton}
                 </Upload>             
                 <Modal visible={previewVisible} footer={null} onCancel={handleCancelPic}>
                     <img alt="故障圖檔" style={{ width: '100%' }} src={previewImage} />
                 </Modal>
             </div>
		)
	}
  //上傳 取消
    handleCancelPic = () => this.setState({ previewVisible: false });
    //上傳 預覽
    handlePreview = async file => {
        if (!file.url && !file.preview) {
            file.preview = await getBase64(file.originFileObj);
        }
        this.setState({
            previewImage: file.thumbUrl || file.preview,
            previewVisible: true,
        });
    };
   //上傳 onChange 
   /*  onChange  參數  file 中有上傳的狀态  status
   */
    handleChange = ({ file, fileList, event }) => {
        if(file.type.indexOf("image") == -1){ //是否包含 image
            return;
        }else {
            if (file.status === "uploading") {
                this.setState({ loading: true });
            }
            if (file.status === "done") {
    
                getBase64(file.originFileObj) 
    
                this.setState({
                    loading: false,
                    baseimg: fileList[0].thumbUrl
                });
        
            }
            if (event == undefined) {
                this.setState({
                    fileList,
                });
            } else {
                this.setState({
                    fileList,
                    baseimg: fileList[0].thumbUrl
                });
            }
        }
    }
           

最終效果