diff --git a/src/components/Sheet.js b/src/components/Sheet.js
index c6662c7..02a4f50 100644
--- a/src/components/Sheet.js
+++ b/src/components/Sheet.js
@@ -1,381 +1,364 @@
-import React from 'react'
-import axios from 'axios'
-import { Button, Form, Input,Icon, Radio, message } from 'antd'
-import 'antd/dist/antd.css'
-import { confirmAlert } from 'react-confirm-alert'
-import 'react-confirm-alert/src/react-confirm-alert.css';
-import qs from 'qs';
+import React from "react";
+import axios from "axios";
+import { Button, Form, Input, Icon, Radio, message } from "antd";
+import "antd/dist/antd.css";
+import { confirmAlert } from "react-confirm-alert";
+import "react-confirm-alert/src/react-confirm-alert.css";
+import qs from "qs";
class NewForm extends React.Component {
- componentDidMount() {
- this.loadLocalStorage();
- }
- loadLocalStorage = () => {
- const values = JSON.parse(localStorage.getItem('formCache') || '{}');
- this.props.form.setFieldsValue(values);
- }
- saveLocalStorage = () => {
- 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: '您填写的表格已经保存在浏览器中,以后可以修改后覆盖提交。点击 Yes 进行提交。',
- buttons: [
- {
- label: 'Yes',
- onClick: () => {
- validateFieldsAndScroll(
- (err, values) => {
- if (err) {
- message.error('填写不正确,请按照提示修改');
- }
- else {
- console.log(values);
- let addForm = async () => {
- let result = await axios(
- 'api/submit',
- {
- headers:{'Content-Type': 'application/x-www-form-urlencoded'},
- method: "POST",
- data: qs.stringify({"dto":JSON.stringify(values)})
- }
- )
- if (result.data.success) {
- message.success("提交成功!后续的面试时间会以短信形式通知,期待你的加入!")
- }
- else {
- message.error("提交失败!可能是网络问题。")
- }
- }
- addForm();
- }
- }
- )
- }
- },
- {
- label: 'No',
- onClick: () => {}
- }
- ]
- });
- }
-
- render() {
- const formItemLayout = {
- labelCol: {
- xs: { span: 24 },
- sm: { span: 8 },
- },
- wrapperCol: {
- xs: { span: 24 },
- sm: { span: 12 },
- },
- };
-
- const tailFormItemLayout = {
- wrapperCol: {
- xs: {
- span: 24,
- offset: 0,
- },
- sm: {
- span: 16,
- offset: 8,
- },
- },
- };
-
- const { getFieldDecorator } = this.props.form;
-
- return (
-
- {
- getFieldDecorator('name', {
- rules: [
- {
- required: true,
- message: "请在此处填入你的姓名"
- }
- ]
- })(
-
- )
- }
-
-
-
- {getFieldDecorator('StuId', {
- rules: [
- {
- required: true,
- message: '请在此处填入你的学号',
- },
- { pattern: /^[0-9]+$/, message: "混进去了数字以外的东西呀" }
-
- ],
- })()}
-
-
-
- {
- getFieldDecorator('sex', {
- rules: [
- {
- required: true,
- message: '请选择你的性别'
- }
- ]
- }
- )
- (
-
- 男
- 女
-
- )
- }
-
-
-
- {
- getFieldDecorator('grade', {
- rules: [
- {
- required: true,
- message: '请选择你的年级'
-
- }
- ]
- }
- )
- (
-
- 大一
- 大二
- 大三
- 大四
-
- )
- }
-
-
-
- {
- getFieldDecorator('major', {
- rules: [
- {
- required: true,
- message: '请在这里填入你的专业'
-
- }
- ]
- }
- )(
-
- )
- }
-
-
-
- {getFieldDecorator('email', {
- rules: [
- {
- required: true,
- message: '请在此处填入你的E-mail'
- }, { type: 'email', message: "邮箱格式不正确" }
- ],
- })()}
-
-
-
- {getFieldDecorator('phone', {
- rules: [
- {
- required: true,
- message: '请在此处填入你的电话号码',
+ componentDidMount() {
+ this.loadLocalStorage();
+ }
+ loadLocalStorage = () => {
+ const values = JSON.parse(localStorage.getItem("formCache") || "{}");
+ this.props.form.setFieldsValue(values);
+ };
+ saveLocalStorage = () => {
+ const values = this.props.form.getFieldsValue();
+ localStorage.setItem("formCache", JSON.stringify(values));
+ };
+ onStuIdChange = () => {
+ let ID = this.props.form.getFieldsValue(["id_student"])["id_student"];
+ this.props.setID(ID);
+ };
+ handleSubmit = (e) => {
+ e.preventDefault();
+ const validateFieldsAndScroll = this.props.form.validateFieldsAndScroll;
+ confirmAlert({
+ title: "提交报名表",
+ message:
+ "您填写的表格已经保存在浏览器中,以后可以修改后覆盖提交。点击 Yes 进行提交。",
+ buttons: [
+ {
+ label: "Yes",
+ onClick: () => {
+ validateFieldsAndScroll((err, values) => {
+ if (err) {
+ message.error("填写不正确,请按照提示修改");
+ } else {
+ console.log(values);
+ let addForm = async () => {
+ let result = await axios("api/submit", {
+ headers: {
+ "Content-Type": "application/x-www-form-urlencoded",
},
- { pattern: /^1[3456789]\d{9}$/, message: "手机号不太对呀" }
- ],
- })()}
-
-
-
- {
- getFieldDecorator('firstWish', {rules: [
- {
- required: true,
- message: '请选择第一志愿'
- }
- ]})(
-
- 电脑部
- 电器部
- 文宣部
- 人资部
- 财外部
-
- )
- }
-
-
-
- {
- getFieldDecorator('secondWish', {rules: [
- {
- required: true,
- message: '请选择第二志愿'
- }
- ]})(
-
- 电脑部
- 电器部
- 文宣部
- 人资部
- 财外部
-
- )
- }
-
-
-
- {
- getFieldDecorator('adjustment', {
- rules: [
- {
- required: true,
- message: '请选择是否服从调剂'
- }
- ]
+ method: "POST",
+ data: qs.stringify({ dto: JSON.stringify(values) }),
+ });
+ if (result.data.success) {
+ message.success(
+ "提交成功!后续的面试时间会以短信形式通知,期待你的加入!"
+ );
+ } else {
+ message.error("提交失败!可能是网络问题。");
}
- )(
-
- 是
- 否
-
- )
- }
-
+ };
+ addForm();
+ }
+ });
+ },
+ },
+ {
+ label: "No",
+ onClick: () => {},
+ },
+ ],
+ });
+ };
-
- {
- getFieldDecorator('firstReason', {
- rules: [
- {
- required: true,
- message: '请填入你选择志愿的原因'
- }
- ]
- }
- )(
-
- )
- }
-
-
-
- {
- getFieldDecorator('secondReason', {
- rules: [
- {
- required: true,
- message: '请填入你选择志愿的原因'
- }
- ]
- }
- )
- (
-
- )
- }
-
-
-
- {
- getFieldDecorator('question1', {
- rules: [
- {
- required: true,
- message: '请简单介绍一下你的特长'
- }
- ]
- }
- )
- (
-
- )
- }
-
-
-
- {
- getFieldDecorator('question2', {
- rules: [
- {
- required: true,
- message: '请填入问题的回答'
- }
- ]
- }
- )
- (
-
- )
- }
-
-
- {
- getFieldDecorator('time1', {initialValue:0,rules: [{required:true}]})
- }
-
-
- {
- getFieldDecorator('time2', {initialValue:0,rules: [{required:true}]})
- }
-
-
- {
- getFieldDecorator('time3', {initialValue:0,rules: [{required:true}]})
- }
-
-
- {
- getFieldDecorator('time4', {initialValue:0,rules: [{required:true}]})
- }
-
-
- {
- getFieldDecorator('time5', {initialValue:0,rules: [{required:true}]})
- }
-
-
- {
- getFieldDecorator('time6', {initialValue:0,rules: [{required:true}]})
- }
-
-
- {
- getFieldDecorator('time7', {initialValue:0,rules: [{required:true}]})
- }
-
-
-
-
-
-
- )
- }
+ render() {
+ const formItemLayout = {
+ labelCol: {
+ xs: { span: 24 },
+ sm: { span: 8 },
+ },
+ wrapperCol: {
+ xs: { span: 24 },
+ sm: { span: 12 },
+ },
+ };
+ const tailFormItemLayout = {
+ wrapperCol: {
+ xs: {
+ span: 24,
+ offset: 0,
+ },
+ sm: {
+ span: 16,
+ offset: 8,
+ },
+ },
+ };
+
+ const { getFieldDecorator } = this.props.form;
+
+ return (
+
+ {getFieldDecorator("name", {
+ rules: [
+ {
+ required: true,
+ message: "请在此处填入你的姓名",
+ },
+ ],
+ })()}
+
+
+
+ {getFieldDecorator("id_student", {
+ rules: [
+ {
+ required: true,
+ message: "请在此处填入你的学号",
+ },
+ { pattern: /^[0-9]+$/, message: "混进去了数字以外的东西呀" },
+ ],
+ })()}
+
+
+
+ {getFieldDecorator("sex", {
+ rules: [
+ {
+ required: true,
+ message: "请选择你的性别",
+ },
+ ],
+ })(
+
+
+
+ 男
+
+
+
+
+ 女
+
+
+
+ )}
+
+
+
+ {getFieldDecorator("grade", {
+ rules: [
+ {
+ required: true,
+ message: "请选择你的年级",
+ },
+ ],
+ })(
+
+ 大一
+ 大二
+ 大三
+ 大四
+
+ )}
+
+
+
+ {getFieldDecorator("major", {
+ rules: [
+ {
+ required: true,
+ message: "请在这里填入你的专业",
+ },
+ ],
+ })()}
+
+
+
+ {getFieldDecorator("email", {
+ rules: [
+ {
+ required: true,
+ message: "请在此处填入你的E-mail",
+ },
+ { type: "email", message: "邮箱格式不正确" },
+ ],
+ })()}
+
+
+
+ {getFieldDecorator("phone", {
+ rules: [
+ {
+ required: true,
+ message: "请在此处填入你的电话号码",
+ },
+ { pattern: /^1[3456789]\d{9}$/, message: "手机号不太对呀" },
+ ],
+ })()}
+
+
+
+ {getFieldDecorator("firstWish", {
+ rules: [
+ {
+ required: true,
+ message: "请选择第一志愿",
+ },
+ ],
+ })(
+
+ 电脑部
+ 电器部
+ 文宣部
+ 人资部
+ 财外部
+
+ )}
+
+
+
+ {getFieldDecorator("secondWish", {
+ rules: [
+ {
+ required: true,
+ message: "请选择第二志愿",
+ },
+ ],
+ })(
+
+ 电脑部
+ 电器部
+ 文宣部
+ 人资部
+ 财外部
+
+ )}
+
+
+
+ {getFieldDecorator("adjustment", {
+ rules: [
+ {
+ required: true,
+ message: "请选择是否服从调剂",
+ },
+ ],
+ })(
+
+ 是
+ 否
+
+ )}
+
+
+
+ {getFieldDecorator("firstReason", {
+ rules: [
+ {
+ required: true,
+ message: "请填入你选择志愿的原因",
+ },
+ ],
+ })()}
+
+
+
+ {getFieldDecorator("secondReason", {
+ rules: [
+ {
+ required: true,
+ message: "请填入你选择志愿的原因",
+ },
+ ],
+ })()}
+
+
+
+ {getFieldDecorator("question1", {
+ rules: [
+ {
+ required: true,
+ message: "请简单介绍一下你的特长",
+ },
+ ],
+ })()}
+
+
+
+ {getFieldDecorator("question2", {
+ rules: [
+ {
+ required: true,
+ message: "请填入问题的回答",
+ },
+ ],
+ })()}
+
+
+ {getFieldDecorator("time1", {
+ initialValue: 0,
+ rules: [{ required: true }],
+ })}
+
+
+ {getFieldDecorator("time2", {
+ initialValue: 0,
+ rules: [{ required: true }],
+ })}
+
+
+ {getFieldDecorator("time3", {
+ initialValue: 0,
+ rules: [{ required: true }],
+ })}
+
+
+ {getFieldDecorator("time4", {
+ initialValue: 0,
+ rules: [{ required: true }],
+ })}
+
+
+ {getFieldDecorator("time5", {
+ initialValue: 0,
+ rules: [{ required: true }],
+ })}
+
+
+ {getFieldDecorator("time6", {
+ initialValue: 0,
+ rules: [{ required: true }],
+ })}
+
+
+ {getFieldDecorator("time7", {
+ initialValue: 0,
+ rules: [{ required: true }],
+ })}
+
+
+
+
+
+
+ );
+ }
}
const Sheet = Form.create({})(NewForm);
-export default Sheet;
\ No newline at end of file
+export default Sheet;
diff --git a/src/components/UploadToOSS.js b/src/components/UploadToOSS.js
index 725670d..ff3be97 100644
--- a/src/components/UploadToOSS.js
+++ b/src/components/UploadToOSS.js
@@ -1,106 +1,120 @@
-import { Upload, Icon, message , Button , Avatar} from 'antd';
-import React from 'react';
-import axios from 'axios';
+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);
+ 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 => {
-
+ constructor(props) {
+ super(props);
+ this.state = {
+ headers: {},
+ fileData: null,
};
- 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}
-
- );
+ 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://1767171970454994.cn-hangzhou.fc.aliyuncs.com/2016-08-15/proxy/nx/nx-test/",
+ {
+ 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
+export default UploadToOSS;