img

src/components/XForm/ImageUpload.jsx

@@ -34,10 +34,10 @@ class ImageUpload extends React.Component {
     }
   };
 
-  render () {
+  render() {
     const uploadButton = (
       <div>
-        <Icon style={{ fontSize: '2em', color: '#aaa' }} type={this.state.loading ? "loading" : "plus"} />        
+        <Icon style={{ fontSize: '2em', color: '#aaa' }} type={this.state.loading ? "loading" : "plus"} />
       </div>
     );
 
@@ -56,8 +56,8 @@ class ImageUpload extends React.Component {
         {(this.state.imageUrl || value) ? (
           <img src={this.state.imageUrl || value} alt="avatar" style={{ width: "100%" }} />
         ) : (
-          uploadButton
-        )}
+            uploadButton
+          )}
       </Upload>
     );
   }

src/pages/activity/editActivity.jsx

@@ -169,12 +169,13 @@ const Edit = (props) => {
   const Poster = (props) => {
     const [inputValue, changeInput] = useState('')
     const [textAreaValue, changeTextArea] = useState('')
+    const [imgValue, changeImg] = useState('')
     return <div>
       <div style={{ display: 'flex' }}>
         <div style={{ width: '420px', height: '900px', display: 'inline-block', marginTop: '30px' }}>
           <div style={{ width: '375px', height: '785px', backgroundColor: '#fff', boxShadow: '0px 0px 16px 6px rgba(0,0,0,0.15)', position: 'relative', margin: '0 auto' }}>
 
-            <img style={{ width: '100%', height: '300px' }} src="http://img0.imgtn.bdimg.com/it/u=4246326797,2657995307&fm=26&gp=0.jpg" alt="" />
+            <img style={{ width: '100%', height: '300px' }} src={imgValue ? imgValue : 'http://img0.imgtn.bdimg.com/it/u=4246326797,2657995307&fm=26&gp=0.jpg'} alt="" />
 
             <div style={{ display: 'flex', alignItems: 'center', marginTop: '-24px' }}>
               <img style={{ width: '70px', height: '70px', border: '4px solid #fff', borderRadius: '35px', marginLeft: '16px' }} src="http://img0.imgtn.bdimg.com/it/u=3463541938,2540701974&fm=26&gp=0.jpg" alt="" />
@@ -208,7 +209,7 @@ const Edit = (props) => {
         <div >
           <div style={{ display: 'flex', width: '100%', margin: '60px 0' }}>
             <p style={{ minWidth: '200px', color: '#222', textAlign: 'right', margin: '0 30px 0 0' }}>海报图片</p>
-            <Avatar />
+            <ImageUploader onChange={e => changeImg(e)} />
           </div>
           <div style={{ display: 'flex', alignItems: 'center', width: '100%', marginBottom: '60px' }}>
             <p style={{ minWidth: '200px', color: '#222', textAlign: 'right', margin: '0 30px 0 0' }}>海报标题</p>
@@ -226,71 +227,12 @@ const Edit = (props) => {
     </div>
 
   }
-  // 图片上传
-  function getBase64(img, callback) {
-    const reader = new FileReader();
-    reader.addEventListener('load', () => callback(reader.result));
-    reader.readAsDataURL(img);
-  }
 
-  function beforeUpload(file) {
-    const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png';
-    if (!isJpgOrPng) {
-      message.error('You can only upload JPG/PNG file!');
-    }
-    const isLt2M = file.size / 1024 / 1024 < 2;
-    if (!isLt2M) {
-      message.error('Image must smaller than 2MB!');
-    }
-    return isJpgOrPng && isLt2M;
-  }
-
-  class Avatar extends React.Component {
-    state = {
-      loading: false,
-    };
-
-    handleChange = info => {
-      if (info.file.status === 'uploading') {
-        this.setState({ loading: true });
-        return;
-      }
-      if (info.file.status === 'done') {
-        getBase64(info.file.originFileObj, imageUrl =>
-          this.setState({
-            imageUrl,
-            loading: false,
-          }),
-        );
-      }
-    }
-    render() {
-      const uploadButton = (
-        <div>
-          <Icon type={this.state.loading ? 'loading' : 'plus'} style={{ fontSize: '50px' }} />
-        </div>
-      );
-      const { imageUrl } = this.state;
-      return (
-        <Upload
-          name="avatar"
-          listType="picture-card"
-          className="avatar-uploader"
-          showUploadList={false}
-          action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
-          beforeUpload={beforeUpload}
-          onChange={this.handleChange}
-        >
-          {imageUrl ? <img src={imageUrl} alt="avatar" style={{ width: '100%' }} /> : uploadButton}
-        </Upload>
-      );
-    }
-  }
-  // 图片上传 end
 
 
   const Share = (props) => {
     const [inputValue, changeInput] = useState('')
+    const [imgValue, changeImg] = useState('')
     // const changeInputValue = e => {
     //   changeInput(e.target.value)
     // }
@@ -305,7 +247,7 @@ const Edit = (props) => {
         <div>
           <p style={{ display: 'flex', alignItems: 'center', fontSize: '14px', color: '#999', margin: '0', lineHeight: '0' }}><img src={logo} style={{ width: '22px', marginRight: '10px' }} />知与行互动</p>
           <p style={{ fontSize: '16px', color: '#222', fontWeight: '600', margin: '0' }}>{inputValue ? inputValue : '置业V客厅 精准获客平台'}</p>
-          <img style={{ width: '200px', height: '140px' }} src="http://house.china.com.cn/nanjing/UserFiles/20171124/11070256.jpg" alt="" />
+          <img style={{ width: '200px', height: '140px' }} src={imgValue ? imgValue : 'http://house.china.com.cn/nanjing/UserFiles/20171124/11070256.jpg'} alt="" />
         </div>
       </div>
       <div style={{ display: 'flex', alignItems: 'center', width: '100%' }}>
@@ -314,7 +256,7 @@ const Edit = (props) => {
       </div>
       <div style={{ display: 'flex', width: '100%', marginTop: '40px' }}>
         <p style={{ minWidth: '200px', color: '#222', textAlign: 'right', margin: '0 30px 0 0' }}>分享图片</p>
-        <Avatar />
+        <ImageUploader onChange={e => changeImg(e)} />
       </div>
       <Button type="primary" htmlType="submit" style={{ margin: '40px 40px 40px 220px' }}> 确定</Button>
       <Button onClick={() => router.go(-1)}>取消</Button>