zjueva
/
2020-fronted-nx
10
0
Fork 0
Code Issues 1 Pull Requests Releases Wiki Activity

图片上传 

TODO:移动端体验
dev
MengJunyi 2020-02-19 11:44:53 +08:00
parent b836aed31b
commit 9adf5a127a
5 changed files with 126 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
debug.log 100644
View File

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

31
src/Entry.js
View File

@ -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,
OSSData: {},
};
stuid : null,
}
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
name="avatar"
onChange={this.handleChange}
style={{display:"inline-block",textAlign:"center"}}
>
{imageUrl ?<Avatar shape="square" size={80} icon="user" src= {imageUrl} /> : uploadButton}
</Upload>
<UploadToOSS stuid={this.state.stuid} />
</center>
<Sheet />
<Sheet setID = {this.setID} />
<BackTop visibilityHeight={200} />
<p style={{textAlign: 'center'}}>
浙江大学学生E志者协会©2020 Created by EVATech

16
src/components/Sheet.js
View File

@ -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="学号" >
{getFieldDecorator('id', {
<Form.Item label="学号" onChange = {this.onStuIdChange} >
{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>
)
}

106
src/components/UploadToOSS.js 100644
View File

@ -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;

1
src/index.js
View File

@ -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();