preview

src/pages/identity/index.tsx

@@ -29,7 +29,17 @@ const nations = [
   {key:'singapore', value:'新加坡'},
   {key:'hk', value:'中国香港'},
 ]
-
+function getObjectURL(file) {
+  var url = null ;
+  if (window.createObjectURL!=undefined) { // basic
+      url = window.createObjectURL(file) ;
+  } else if (window.URL!=undefined) { // mozilla(firefox)
+      url = window.URL.createObjectURL(file) ;
+  } else if (window.webkitURL!=undefined) { // webkit or chrome
+      url = window.webkitURL.createObjectURL(file) ;
+  }
+  return url ;
+}
 const IdentityPage: React.FC<DispatchProp & UserModelState & IdentityModelState> = ({
   dispatch,
   user,
@@ -39,18 +49,26 @@ const IdentityPage: React.FC<DispatchProp & UserModelState & IdentityModelState>
 }) => {
   const picCover = React.createRef();
   const picBack = React.createRef();
+  const pic1url = React.createRef();
+  const pic2url = React.createRef();
   const [idtypesVisible, setIdtypesVisible] = useState(false);
   const [nationVisible, setNationVisible] = useState(false);
   const [realname, setRealname] = useState();
   const [idNo, setIdNo] = useState();
 
-  const onPicCover = (key: any) => {
-    console.log(key);
-    dispatch({ type: 'user/onUpdateState', payload: key });
-  };
-  const onPicBack = (key: any) => {
-    dispatch({ type: 'user/onUpdateState', payload: key });
-  };
+  const preview = (type) => {
+    const pic1 = picCover.current;
+    const pic2 = picBack.current;
+    const obj = type === 1 ? pic1 : pic2;
+    // let x = getObjectURL(obj);
+    // pic1url.current.src = x;
+    var reader = new FileReader();
+    reader.readAsDataURL(obj.files[0]);
+    reader.onload = function(e) {
+        type === 1 ? (pic1url.current.src = e.target.result) : (pic2url.current.src = e.target.result);
+    }
+    
+  }
   const onIdTypeSelected = (key: string) => {
     setIdtypesVisible(false);
     dispatch({ type: 'user/onUpdateState', payload: key });
@@ -92,8 +110,8 @@ const IdentityPage: React.FC<DispatchProp & UserModelState & IdentityModelState>
     formData.append('pic2', pic2);
     formData.append('realname', realname);
     formData.append('idNo', idNo);
-    const data = await http.post('/user/verify', formData);
-    console.log(data);
+    // const data = await http.post('/user/verify', formData);
+    // console.log(data);
   }
   return (
     <div className={styles.container}>
@@ -111,15 +129,15 @@ const IdentityPage: React.FC<DispatchProp & UserModelState & IdentityModelState>
         <div style={{'display': 'flex', 'position': 'relative'}}>
           <div className={styles.uploadBox}>
             <div className={styles.imgBox}>
-              <img src={kycIdCover} className={styles.idPhoto} />
+              <img src={kycIdCover} className={styles.idPhoto} ref={pic1url}/>
             </div>
-            <input type="file" className={styles.input} ref={picCover}/>
+            <input type="file" className={styles.input} ref={picCover} onChange={e => preview(1)}/>
           </div>
           <div className={styles.uploadBox}>
             <div className={styles.imgBox}>
-              <img src={kycIdBack} className={styles.idPhoto}/>
+              <img src={kycIdBack} className={styles.idPhoto} ref={pic2url}/>
             </div>
-            <input type="file" className={styles.input} ref={picBack}/>
+            <input type="file" className={styles.input} ref={picBack} onChange={e => preview(2)}/>
           </div>
         </div>
         <input className={styles.myinput}

src/pages/identity/style.less

@@ -46,6 +46,8 @@
   position: relative;
   width:100%;
   height:100%;
+  max-width: 300px;
+  max-height: 200px;
 }
 .uploadBox {
   flex: 1 0 auto;