forked from Gitlink/forgeplus-react
137 lines
3.9 KiB
JavaScript
137 lines
3.9 KiB
JavaScript
import React, { Component } from "react";
|
|
import { Upload, Button, Icon } from 'antd';
|
|
import { getUploadActionUrl, appendFileSizeToUploadFileAll } from 'educoder';
|
|
|
|
import axios from 'axios';
|
|
const { Dragger } = Upload;
|
|
class Index extends Component {
|
|
constructor(props) {
|
|
super(props);
|
|
this.state = {
|
|
fileList: undefined,
|
|
}
|
|
}
|
|
componentDidMount=()=>{
|
|
this.checkInitFile();
|
|
}
|
|
componentDidUpdate=(prevProps)=>{
|
|
if(prevProps && prevProps.fileList !== this.props.fileList){
|
|
this.checkInitFile();
|
|
}
|
|
}
|
|
checkInitFile=()=>{
|
|
const { fileList } = this.props;
|
|
if(fileList && fileList.length>0){
|
|
this.setState({ fileList: appendFileSizeToUploadFileAll(fileList) });
|
|
}
|
|
}
|
|
|
|
onAttachmentRemove = (file) => {
|
|
if (!file.percent || file.percent === 100) {
|
|
// this.props.confirm({
|
|
// content: '是否确认删除?',
|
|
// onOk: () => {
|
|
// this.deleteAttachment(file)
|
|
// },
|
|
// onCancel() {
|
|
// console.log('Cancel');
|
|
// },
|
|
// });
|
|
this.deleteAttachment(file)
|
|
return false;
|
|
}
|
|
}
|
|
|
|
deleteAttachment = (file) => {
|
|
|
|
const url = `/attachments/${file.response ? file.response.id : file.uid}.json`
|
|
axios.delete(url, {
|
|
}).then((response) => {
|
|
if (response.data) {
|
|
if (response.data.status === 0) {
|
|
this.setState((state) => {
|
|
const index = state.fileList.indexOf(file);
|
|
const newFileList = state.fileList.slice();
|
|
newFileList.splice(index, 1);
|
|
return {
|
|
fileList: newFileList,
|
|
};
|
|
});
|
|
this.fileIdList(this.state.fileList);
|
|
} else {
|
|
this.props.showNotification(response.data.message)
|
|
}
|
|
}
|
|
}).catch(function (error) {
|
|
console.log(error);
|
|
});
|
|
}
|
|
|
|
|
|
handleChange = (info) => {
|
|
const { changeIsComplete } = this.props;
|
|
changeIsComplete && changeIsComplete(true);
|
|
|
|
if (info.file.status === 'uploading' || info.file.status === 'done' || info.file.status === 'removed') {
|
|
let fileList = info.fileList;
|
|
|
|
this.setState({ fileList: appendFileSizeToUploadFileAll(fileList) });
|
|
this.fileIdList(fileList);
|
|
|
|
if ( info.file.status === 'done') {
|
|
let filelist = info.fileList && info.fileList.length>0 && info.fileList[info.fileList.length-1];
|
|
if(filelist && filelist.response && filelist.response.status === -1){
|
|
this.props.showNotification(filelist.response.message)
|
|
this.setState((state) => {
|
|
state.fileList.pop()
|
|
return {
|
|
fileList: state.fileList,
|
|
};
|
|
});
|
|
this.fileIdList(this.state.fileList);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
fileIdList = (fileList) => {
|
|
let array = [];
|
|
fileList && fileList.length > 0 && fileList.map((item) => {
|
|
return array.push(item.response && item.response.id);
|
|
})
|
|
array && this.props.load && this.props.load(array);
|
|
}
|
|
|
|
beforeUpload = (file) => {
|
|
const { size } = this.props;
|
|
const isLt100M = file.size / 1024 / 1024 < size;
|
|
if (!isLt100M) {
|
|
this.props.showNotification(`文件大小必须小于${size}MB!`);
|
|
}
|
|
return isLt100M;
|
|
}
|
|
|
|
render() {
|
|
//判断是否已经提交，如已提交评论则上一条评论数据清除
|
|
const { isComplete, icon } = this.props;
|
|
const { fileList } = this.state;
|
|
|
|
let list = isComplete === true ? fileList : undefined;
|
|
const upload = {
|
|
name: 'file',
|
|
fileList: list,
|
|
action: `${getUploadActionUrl()}`,
|
|
onChange: this.handleChange,
|
|
onRemove: this.onAttachmentRemove,
|
|
beforeUpload: this.beforeUpload
|
|
};
|
|
|
|
return (
|
|
<Dragger {...upload} className={this.props.className}>
|
|
{icon || <Icon type="inbox" />}
|
|
<p className="ant-upload-text font-14">拖动文件或<span className="color-blue">点击此处上传</span></p>
|
|
</Dragger>
|
|
)
|
|
}
|
|
}
|
|
export default Index; |