UploadCom.js 2.7 KB
Newer Older
徐立's avatar
徐立 committed
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80
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)=>{
徐立's avatar
徐立 committed
81
            if(f.path&&f.path.indexOf('.png') !=-1||f.path.indexOf('.jpg') !=-1){
徐立's avatar
徐立 committed
82 83 84 85 86 87 88 89 90 91 92
              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>

          );

    }
}