-
- {imageUrl ? : uploadButton}
-
+
-
+
浙江大学学生E志者协会©2020 Created by EVATech
diff --git a/src/components/Sheet.js b/src/components/Sheet.js
index 1215436..c6662c7 100644
--- a/src/components/Sheet.js
+++ b/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 {
}
-
- {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: "手机号不太对呀" }
],
})()}
@@ -218,7 +222,7 @@ class NewForm extends React.Component {
电器部
文宣部
人资部
- 财务部
+ 财外部
)
}
@@ -237,7 +241,7 @@ class NewForm extends React.Component {
电器部
文宣部
人资部
- 财务部
+ 财外部
)
}
diff --git a/src/components/UploadToOSS.js b/src/components/UploadToOSS.js
new file mode 100644
index 0000000..725670d
--- /dev/null
+++ b/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 = (
+
+ );
+ const { imageUrl } = this.state;
+ return (
+
+ {imageUrl ? : uploadButton}
+
+ );
+ }
+}
+export default UploadToOSS;
\ No newline at end of file
diff --git a/src/index.js b/src/index.js
index e310187..f77edcd 100644
--- a/src/index.js
+++ b/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(, document.getElementById('root'));
serviceWorker.register();