import React from 'react' import { Tree,Upload,Icon,Button,message } from 'antd'; import { queryApiActionPath } from "../utils/queryConfig"; import config from '../config/config' const TreeNode = Tree.TreeNode; export default class UploadCom extends React.Component { constructor(props){ super(props) const value = props.value || {}; this.state = { files: value.files } } triggerChange = (changedValue) => { // Should provide an event to pass value to Form. const onChange = this.props.onChange; if (onChange) { onChange(Object.assign({}, this.state, changedValue)); } } componentWillReceiveProps(nextProps) { // Should be a controlled component. if ('value' in nextProps) { const value = nextProps.value; this.setState(value); } } changeUrl=(info)=>{ if (info.file.status === 'done') { message.success(`${info.file.name} 上传成功`); const files=this.state.files files.push({path:info.file.response,name:info.file.name}) if (!('value' in this.props)) { this.setState({files }); } this.triggerChange({files}); } else if (info.file.status === 'error') { message.error(`${info.file.name} 上传失败`); } } remove=(path)=>{ const files=this.state.files for(var i=0;i<files.length;i++){ if(files[i].path==path){ files.splice(i,1); break; } } if (!('value' in this.props)) { this.setState({files }); } this.triggerChange({files}); } render() { const {files}= this.state const props = { name: 'file', action: config.uploadUrl, showUploadList:false, onChange:this.changeUrl } return ( <div> <Upload {...props}> <Button> <Icon type="upload" />上传附件 </Button> </Upload> <ul style={{paddingLeft:8}}> {files.map((f)=>{ if(f.path&&f.path.indexOf('.png') !=-1||f.path.indexOf('.jpg') !=-1){ return <li key={f.path}><img style={{width:100,height:100}} src={queryApiActionPath() + f.path}/><Icon style={{marginLeft:10}} type="delete" onClick={this.remove.bind(this,f.path)} /></li> } return <li key={f.path}><a target="_blank" key={f.path} href={queryApiActionPath()+f.path} >{f.name}</a> <Icon style={{marginLeft:10}} type="delete" onClick={this.remove.bind(this,f.path)} /></li> })} </ul> </div> ); } }