forked from Gitlink/forgeplus-react
107 lines
2.8 KiB
JavaScript
107 lines
2.8 KiB
JavaScript
import React, { Component } from "react";
|
||
import { Upload, Icon } from "antd";
|
||
import { getUploadActionUrl, appendFileSizeToUploadFileAll } from "educoder";
|
||
|
||
import axios from "axios";
|
||
const { Dragger } = Upload;
|
||
class Read extends Component {
|
||
constructor(props) {
|
||
super(props);
|
||
this.state = {
|
||
fileList: undefined,
|
||
fileContent: undefined,
|
||
fileName: undefined,
|
||
};
|
||
}
|
||
|
||
onAttachmentRemove = (file) => {
|
||
this.setState({
|
||
fileList: undefined,
|
||
fileContent: undefined,
|
||
fileName: undefined,
|
||
});
|
||
};
|
||
|
||
handleChange = (info) => {
|
||
let reader = new FileReader();
|
||
reader.readAsText(info.fileList[0].originFileObj, "UTF-8");
|
||
reader.onload = (e) => {
|
||
this.state.fileContent = e.target.result;
|
||
this.props.load && this.props.load(this.state);
|
||
};
|
||
};
|
||
|
||
|
||
beforeUpload = (file) => {
|
||
const forbidden_type = [
|
||
"jpg",
|
||
"jpeg",
|
||
"png",
|
||
"ico",
|
||
"bmp",
|
||
"gif",
|
||
"pdf",
|
||
"csv",
|
||
"xlsx",
|
||
"xls",
|
||
"tif",
|
||
"svg",
|
||
"psd",
|
||
"cdr",
|
||
"webp",
|
||
];
|
||
const { fileList } = this.state;
|
||
const { size } = this.props;
|
||
const isLt100M = file.size / 1024 / 1024 < size;
|
||
const file_type = file.type.split("/").slice(-1)[0];
|
||
if (fileList && fileList.length > 0) {
|
||
this.props.showNotification("文件已存在, 请删除后再上传");
|
||
} else if (!isLt100M) {
|
||
this.props.showNotification(`文件大小必须小于${size}MB!`);
|
||
} else if (file_type && forbidden_type.indexOf(file_type) !== -1) {
|
||
this.props.showNotification(`不支持${file_type}类型`);
|
||
} else {
|
||
this.setState({
|
||
fileList: [file],
|
||
fileName: file.name,
|
||
})
|
||
}
|
||
return false;
|
||
};
|
||
|
||
render() {
|
||
//判断是否已经提交，如已提交评论则上一条评论数据清除
|
||
const { icon, size } = this.props;
|
||
const { fileList, fileName } = this.state;
|
||
const upload = {
|
||
name: "file",
|
||
fileList: fileList,
|
||
onChange: this.handleChange,
|
||
onRemove: this.onAttachmentRemove,
|
||
beforeUpload: this.beforeUpload
|
||
};
|
||
|
||
return (
|
||
<Dragger {...upload} className={this.props.className}>
|
||
{fileName ? (
|
||
<p className="ant-upload-text">{fileName}</p>
|
||
) : (
|
||
<div>
|
||
{icon || <Icon type="inbox" />}
|
||
<p className="ant-upload-text">
|
||
拖动文件或<span className="color-blue">点击此处上传</span>
|
||
</p>
|
||
<p className="mt10">
|
||
暂仅支持文件格式，不支持图片,excel等不可以txt读取的文件
|
||
</p>
|
||
<p className="mt10">
|
||
文件名请使用英文且不得超过{size}MB
|
||
</p>
|
||
</div>
|
||
)}
|
||
</Dragger>
|
||
);
|
||
}
|
||
}
|
||
export default Read;
|