/**
 * title: 多选图片墙
 * desc: 可通过 `accept` 来设置可以上传的文件格式
 */ import React , { useState , useEffect } from 'react' ; import { UploadPicturesWall } from '@rwp/react-ui' ; import { UploadImageType } from '@rwp/react-ui/dist/upload' ; export default ( ) => { const [ images , setImages ] = useState < UploadImageType [ ] > ( [ ] ) ; useEffect ( ( ) => { setImages ( [ { id : '1' , url : 'https://user-images.githubusercontent.com/24241052/91524537-0b925f00-e932-11ea-8f8d-d037d9520059.jpg' , name : '可爱的小姐姐' } ] ) ; } , [ ] ) ; return ( < UploadPicturesWall images = { images } multiple onChange = { changeImage => { console . log ( changeImage ) ; } } onUpload = { async ( files ) => { const promises = [ ] ; for ( let i = 0 ; i < files . length ; i += 1 ) { promises . push ( new Promise < UploadImageType > ( ( resolve ) => { const reader = new FileReader ( ) ; reader . readAsDataURL ( files . item ( i ) ! ) ; reader . onload = ( ) => { const { result } = reader ; const data = { id : `${ new Date ( ) . getTime ( ) }` , name : `${ new Date ( ) . getTime ( ) }` , url : result ! . toString ( ) , state : 'SUCCESS' } ; resolve ( data ) ; } ; } ) ) ; } console . log ( '---------------' ) ; const resultImages = await Promise . all ( promises ) ; return resultImages ; } } />); } ;