antd-upload picture

antd-upload picture

import React from 'react';
import {Modal, Button, Input, Form, Upload,Table,Icon,Row,Col} from 'antd'

class App extends React.PureComponent {
  state = {
    visible: false ,
    fileList: [],
   
  };
  showModal = () => {
    this.setState({
      visible: true,
    });
  };
  handleOk = e => {//真正上传
    this.handleUpload()

  };
  handleCancel = e => {
    this.setState({
      visible: false,
    });
  };

  handleDelete = uid => {
    const {fileList} = this.state
    this.fileDelete(fileList.filter(item => item.uid == uid))
  };
  fileDelete = file => {
      this.setState(state => {
        const index = state.fileList.indexOf(...file);
        const newFileList = state.fileList.slice();
        newFileList.splice(index, 1);
        return {
          fileList: newFileList,
        };
      });
    }

  handleUpload = () => {
      const { fileList } = this.state;
      var formData = new FormData();
      fileList.forEach(file => {
        formData.append('files[]', file);

      });
     
      // reqwest({
      //   url: 'https://www.mocky.io/v2/5cc8019d300000980a055e76',
      //   method: 'post',
      //   processData: false,
      //   data: formData,
      //   success: () => {
      //     this.setState({
      //       fileList: []
      //     });
      //     alert('upload successfully.');
      //   },
      //   error: () => {
      //     alert('upload failed.');
      //   },
      // });
    };
   changeName = (e,uid)=>{
     let {fileList} = this.state
     let arr = fileList
     arr.forEach(file=>{
       if(file.uid === uid){
         file.name = e.target.name
       }
     })
     console.log(arr);
     this.setState({
       fileList
     })
   }
   pressEnter = e=>{
     console.log(this.state.fileList);
   }
  render(){
    const {form} = this.props
    const { fileList,previewImage,visible } = this.state;
    let i = 1;
    const uploadProps = {
      fileList,
      multiple:true,
      // action: 'https://www.mocky.io/v2/5cc8019d300000980a055e76',
      // listType: 'picture',
      showUploadList:false, //不显示上传列表
      beforeUpload:(file,fileList)=>{
        fileList = fileList.map(file => {
            file.url = URL.createObjectURL(file) //手工给每一个 file 添加一个 .url 属性值，有了这个值默认预览就管用了
            return file
        })
        console.log(file);
        this.setState({...fileList}) //由于我们设置不自动上传，所以我们要在这里面保存一下待上传的文件列表
        return false;
      },
      onChange:(file)=>{
        this.setState({
          fileList:[...file.fileList]
        });
      }

    };
    const columns = [
      {
        title: '表情名称',
        dataIndex: 'name',
        render(val){
          let index = val.lastIndexOf(".")
          return val.substring(0,index)
        }
      },
      {
        title: '表情图片',
        render(file){
          return <img src={file.url} style={{width:'100px'}} ></img>
        }
      },
      {
        title: '排序',
        dataIndex: 'uid',
      },
      {
        title: '删除',
        render:(val)=>{
          return <Icon type="delete" onClick={()=>this.handleDelete(val.uid)}/>
        }
      },
    ];

    
    return (
      <div >
          <Button type="primary" onClick={this.showModal}>
            编辑表情
          </Button>
          <Modal
            title="编辑表情"
            visible={this.state.visible}
            onOk={this.handleOk}
            onCancel={this.handleCancel}
            okText="确认"
            cancelText="取消"
          >
            <Form layout="inline" onSubmit={this.handleSubmit}>
              <Form.Item label="所属表情包">
                {form.getFieldDecorator('bagName', {
                  rules: [{ required: true, message: '请输入表情包名称' }],
                })(
                  <Input
                    placeholder="请输入表情包名称"
                  />,
                )}
              </Form.Item>
            </Form>

            {/* <Table dataSource={fileList} columns={columns} rowKey='uid'/> */}
            {
              fileList.map(file=>{
                let val = file.name
                let index = val.lastIndexOf(".")
                let name = val.substring(0,index)
                return (
                  <div> 
                    <Row>
                      <Col span={8}>表情名称：<Input defaultValue={name} onChange={()=>this.changeName(file.name)} onPressEnter={this.pressEnter}></Input></Col>
                      <Col span={8}> <img src={file.url} style={{width:'100px'}} ></img></Col>
                      <Col span={2}> <Icon type="delete" onClick={()=>this.handleDelete(file.uid)}/></Col>
                    </Row>
                    
                  </div>
                )
              })
            }
            <Upload {...uploadProps}>
              <Button>
                +添加表情
              </Button>
            </Upload>
           

          </Modal>

        
      </div>
    );
  }
}
App = Form.create({})(App)

export default App