antd 的Upload做动态增加、减少图片上传，支持新增和编辑图片

Question

根据父组件传过来的type有新增和编辑2种
效果类似这种，点一个加一个，现在主要fileList的赋值问题，写不下去了。。。
https://ant.design/components...

import React, { Component } from 'react'
import { Form, Input, Icon, Button,Upload,Modal,Select,message } from 'antd'
import Utils from '../../assets/js/utils'
import './index.less'

class BaseAddLicense extends Component {
  state={
  }
  params = {
    keyLength :[],
    id:0
  }
  remove = k => {
    const { form } = this.props;
    const indexs = form.getFieldValue('indexs');
    if (indexs.length === 0) {
      return;
    }

    form.setFieldsValue({
      indexs: indexs.filter(key => key !== k),
    });
  };

  add = () => {
    const { form } = this.props;
    const indexs = form.getFieldValue('indexs')
    const nextKeys = indexs.concat(this.params.id++)
    form.setFieldsValue({
      indexs: nextKeys,
    });
  };
  componentDidMount (){
    this.props.onRefs(this)
  }
  componentWillUpdate(nextProps, nextState){
    const {fileListImg } = nextProps
    if(fileListImg && fileListImg.length > 0 && this.params.keyLength.length === 0){
      fileListImg.forEach( (element,index) => {
        this.params.keyLength.push(index)
      })
      this.params.id = this.params.keyLength.length
    }
  }
  handleChange = (list,k) => {
    list.fileList.forEach(imgItem => {
      if(imgItem.response && imgItem.response.code !== 200 ){
        imgItem.status ="error"
        message.error('图片上传失败，请重新上传！');
        return
      }
      if (imgItem && imgItem.status === 'done' && imgItem.response && imgItem.response.data[0].filePath) {
        imgItem.thumbUrl = imgItem.response.data[0].filePath;
      }
    })
    this.props.changeFileList(list.fileList,k)
    console.log(list.fileList,k)
  }
  handleBeforeUpload = (file,fileList) => {
    //限制图片 格式、size、分辨率
    const isJPG = file.type === 'image/jpeg';
    const isJPEG = file.type === 'image/jpeg';
    const isPNG = file.type === 'image/png';
    const isLt2M = file.size / 1024 / 1024 < 4;
    if (!(isJPG || isJPEG  || isPNG)) {
      Modal.error({
        title: '只能上传JPG、JPEG 、PNG格式的图片~',
      })
      fileList.pop()
      return false
    } else if (!isLt2M) {
      Modal.error({
        title: '上传失败超过4M限制，不允许上传',
      });
      fileList.pop()
      return false
    }
    return new Promise((resolve, reject) => {
      if (!(isJPG || isJPEG || isPNG)) {
        reject(file);
      } else {
        resolve(file && this.checkImageWH(file))
      }
    });

  }
  checkImageWH(file) {
    return new Promise(function(resolve, reject) {
      let filereader = new FileReader();
      filereader.onload = e => {
        let src = e.target.result;
        const image = new Image();
        image.onload = function() {
          // 获取图片的宽高，并存放到file对象中
          file.width = this.width;
          file.height = this.height;
          resolve();
        };
        image.onerror = reject;
        image.src = src;
      };
      filereader.readAsDataURL(file);
    });
  }
  initReset = ()=>{
    this.params.id = 0
    this.params.keyLength =[]
  }
  initContactsList = ()=>{
    const { getFieldDecorator, getFieldValue } = this.props.form
    const uploadButton = (
      <div>
        <Icon type="plus" />
        <div className="ant-upload-text">上传</div>
      </div>
    )
    getFieldDecorator('indexs', { initialValue: this.params.keyLength && this.params.keyLength.length >0 ? this.params.keyLength : [] });
    const indexs = getFieldValue('indexs')
    const textInfo = this.props.textInfo || null
    const formItems = indexs.map((k, index) => {
      return (
        <div key={index}>
        <Form.Item label="图片附件" key={`imgArr${k}`}>
          {getFieldDecorator(`imgArr[${k}]`,{
            initialValue:{fileList:this.props.fileListImg.length >0?[this.props.fileListImg[k]]:[]},
            rules:[
              {
                  required:true,
                  message:'图片不能为空'
              }
            ]
          })(
              <Upload 
              action={api.upload}
              beforeUpload={this.handleBeforeUpload}
              data={files => ({
                path: 'base'
              })}
              listType="picture-card"
              accept='image/jpeg,image/jpg,image/png'
              headers={{"Authorization": Utils.getCookies('Authorization')}}
              fileList={this.props.fileListImg[k]}
              onChange={(list)=>this.handleChange(list,k)}
              >
               {
                 getFieldValue(`imgArr[${k}]`) &&
                 getFieldValue(`imgArr[${k}]`).fileList.length > 0 
                 && getFieldValue(`imgArr[${k}]`).fileList[0].status === "done" ? 
                 null:uploadButton
               }
              </Upload>
            )}
        </Form.Item>
        <Form.Item>
          {indexs.length > 0 && (this.props.type && this.props.type.type !== 'look')? (
            <Icon
              className="dynamic-delete-button"
              type="minus-circle-o"
              onClick={() => this.remove(k)}
            />
          ) : null} 
        </Form.Item>
      </div>
      )
    })
    return formItems
  }
  render() {
    return (
      <div>
      {
        this.props.type && this.props.type.type === 'look' ? null :
        <Form.Item>
          <Button type="dashed" onClick={this.add}>
            <Icon type="plus" /> 添加证照信息
          </Button>
        </Form.Item>
      }
        {this.initContactsList()}
      </div>
    );
  }
}
export default BaseAddLicense

Answer 1

将html的img标签封装成一个组件，点击图片时弹出一个模态框，在这个模态框里放一个Upload组件
思路大体上是这样的