图片上传

TODO:移动端体验

debug.log

@@ -0,0 +1 @@
+[0219/112038.789:ERROR:http_transport_win.cc(276)] WinHttpSendRequest: The operation completed successfully. (0x0)

src/Entry.js

@@ -1,24 +1,17 @@
 import React from 'react';
 import Sheet from './components/Sheet';
-import { Upload,Icon,BackTop,Layout,Button,Avatar} from 'antd';
+import { BackTop,Layout} from 'antd';
 import Background from './background2.jpg';
-
+import UploadToOSS from './components/UploadToOSS'
 
 class Entry extends React.Component {
   state = {
-    loading: false,
+    stuid : null,
-    OSSData: {},
+  }
-  };
+  setID = (value) =>{
-
+    this.setState({stuid:value})
-
+  }
-
   render() {
-    const uploadButton = (
-      <Button>
-      <Icon type="upload" /> 上传照片
-      </Button>
-    );
-    const { imageUrl } = this.state;
     return (
       <Layout style={{backgroundImage: `url(${Background})`}}>
         <div style={{background:'#fff',borderRadius:20,
@@ -27,15 +20,9 @@ class Entry extends React.Component {
             浙江大学学生E志者协会2020年纳新报名表
           </h2>
           <center>
-          <Upload
+            <UploadToOSS stuid={this.state.stuid} />
-          name="avatar"
-          onChange={this.handleChange}
-          style={{display:"inline-block",textAlign:"center"}}
-          >
-            {imageUrl ?<Avatar shape="square" size={80} icon="user" src= {imageUrl} /> : uploadButton}
-          </Upload>
           </center>
-          <Sheet />
+          <Sheet setID = {this.setID} />
           <BackTop visibilityHeight={200} />
           <p style={{textAlign: 'center'}}>
             浙江大学学生E志者协会©2020 Created by EVATech

src/components/Sheet.js

@@ -18,12 +18,16 @@ class NewForm extends React.Component {
       const values = this.props.form.getFieldsValue();
       localStorage.setItem('formCache', JSON.stringify(values));
     }
+    onStuIdChange = () =>{
+      let ID = this.props.form.getFieldsValue(['StuId'])['StuId']
+      this.props.setID(ID)
+    }
     handleSubmit = e => {
         e.preventDefault();
         const validateFieldsAndScroll = this.props.form.validateFieldsAndScroll
         confirmAlert({
           title: '提交报名表',
-          message:  '您填写的表格已经保存在浏览器中，以后可以修改后覆盖提交。点击 OK 进行提交。',
+          message:  '您填写的表格已经保存在浏览器中，以后可以修改后覆盖提交。点击 Yes 进行提交。',
           buttons: [
             {
               label: 'Yes',
@@ -109,8 +113,8 @@ class NewForm extends React.Component {
                     }
                 </Form.Item>
                 
-                <Form.Item label="学号" >
+                <Form.Item label="学号"   onChange = {this.onStuIdChange} >
-                    {getFieldDecorator('id', {
+                    {getFieldDecorator('StuId', {
                     rules: [
                         {
                         required: true,
@@ -200,7 +204,7 @@ class NewForm extends React.Component {
                       required: true,
                       message: '请在此处填入你的电话号码',
                     },
-                    { pattern: /^1[345678]\d{9}$/, message: "手机号不太对呀" }
+                    { pattern: /^1[3456789]\d{9}$/, message: "手机号不太对呀" }
                   ],
                 })(<Input />)}
               </Form.Item>
@@ -218,7 +222,7 @@ class NewForm extends React.Component {
                                 <Radio.Button value={2}>电器部</Radio.Button>
                                 <Radio.Button value={3}>文宣部</Radio.Button>
                                 <Radio.Button value={4}>人资部</Radio.Button>
-                                <Radio.Button value={5}>财务部</Radio.Button>
+                                <Radio.Button value={5}>财外部</Radio.Button>
                             </Radio.Group>
                         )
                     }
@@ -237,7 +241,7 @@ class NewForm extends React.Component {
                                 <Radio.Button value={2}>电器部</Radio.Button>
                                 <Radio.Button value={3}>文宣部</Radio.Button>
                                 <Radio.Button value={4}>人资部</Radio.Button>
-                                <Radio.Button value={5}>财务部</Radio.Button>
+                                <Radio.Button value={5}>财外部</Radio.Button>
                             </Radio.Group>
                         )
                     }

src/components/UploadToOSS.js

@@ -0,0 +1,106 @@
+import { Upload, Icon, message , Button , Avatar} from 'antd';
+import React from 'react';
+import axios from 'axios';
+
+function getBase64(img, callback) {
+    const reader = new FileReader();
+    reader.addEventListener('load', () => callback(reader.result));
+    reader.readAsDataURL(img);
+}
+
+class UploadToOSS extends React.Component {
+    constructor(props) {
+        super(props);
+        this.state = {
+            headers:{
+            },
+            fileData: null,
+        };
+    }
+
+
+    beforeUpload = (file)=>{
+        const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png';
+        if (!isJpgOrPng) {
+          message.error('只能上传JPG/PNG格式的图片哦！');
+        }
+        const isLt2M = file.size / 1024 / 1024 < 2;
+        if (!isLt2M) {
+          message.error('图像文件要小于2MB哦！');
+        }
+        if(!this.props.stuid){
+            message.error("请先填写学号！");
+        }
+        if (isJpgOrPng && isLt2M && this.props.stuid){
+            if(file.type === 'image/png') {
+                this.setState({headers:{            
+                    'Content-Type': 'application/octet-stream',
+                    'stuid':this.props.stuid,
+                    'pic-type':'png'}});
+            }else{
+                this.setState({headers:{            
+                    'Content-Type': 'application/octet-stream',
+                    'stuid':this.props.stuid,
+                    'pic-type':'jpg'}});
+            }
+            let reader = new FileReader();
+            reader.readAsArrayBuffer(file);
+            getBase64(file, imageUrl =>
+                this.setState({
+                    imageUrl,
+            }),)
+            return new Promise((resolve) => {
+                reader.onload = (e) => {
+                    this.setState({fileData:reader.result});
+                    resolve()
+                }
+            })
+        }else{
+            return false;
+        }
+    }
+    handleChange = info => {
+    
+    };
+    customRequest = async () =>{
+        if(this.state.fileData === null){
+            message.error("图片未能正确读取哦！请重试！")
+            return
+        }
+        console.log(this.state.headers)
+        let result =  await axios(
+            'https://1299271970796699.cn-hangzhou.fc.aliyuncs.com/2016-08-15/proxy/oss_upload/upload/',
+            {
+                headers: this.state.headers,
+                method: "POST",
+                data: this.state.fileData,
+            }
+        )
+        if (result.data==="Success!") {
+            message.success("上传成功!(您还可以点击预览图继续上传以覆盖此次上传的图片)")
+        }else{
+            message.error("上传失败!可能是网络问题！")
+        }
+    }
+
+
+    render() {
+        const uploadButton = (
+            <Button style={{marginBlockEnd:24}}>
+                <Icon type="upload" /> 点击或拖拽文件到此处以上传照片
+            </Button>
+        );
+        const { imageUrl } = this.state;
+        return (
+        <Upload
+            showUploadList = {false}
+            beforeUpload={this.beforeUpload}
+            onChange={this.handleChange}
+            customRequest = {this.customRequest}
+        >
+            {imageUrl ?<Avatar shape="square" size={120} icon="user" src= {imageUrl} style={{marginBlockEnd:24}}/> : uploadButton}
+        </Upload>
+        );
+    }
+}
+export default UploadToOSS;

src/index.js

@@ -2,7 +2,6 @@ import React from 'react';
 import ReactDOM from 'react-dom';
 import './index.css';
 import * as serviceWorker from './serviceWorker';
-
 import App from './App';
 ReactDOM.render(<App />, document.getElementById('root'));
 serviceWorker.register();