React中antd框架下upload多个图片简单上传

antd的上传组件也是挺好康的，预览、删除也特别方便。适合表单上传。
查询资料多个上传处理 不明确，我就在下面name为file的input隐藏域内储存多个图片上传

这行代码是限制多个图片上传的总数，这里目前是不能超过6张图片，到达六张图片后，点击上传的按钮将会消失。

   {
    
    this.props.tAccessory >= 6 ? null : uploadButton}

点击眼睛会弹出modl框扩大显示图片。

全文代码如下，稍加修改即可使用。

import React from 'react';
import {
    
     Form, Input,Upload,Icon,Modal} from 'antd';
import {
    
     connect } from 'dva';
const FormItem = Form.Item;
const {
    
     TextArea } = Input;
function getBase64(file) {
    
    
  return new Promise((resolve, reject) => {
    
    
    const reader = new FileReader();
    reader.readAsDataURL(file);
    reader.onload = () => resolve(reader.result);
    reader.onerror = error => reject(error);
  });
}
class AddMa extends React.Component {
    
    
  state = {
    
    
    value: '',
    previewVisible: false,
    previewImage: '',
    fileList:[],
  };
  onChange = ({
    
     target: {
    
     value } }) => {
    
    
    this.setState({
    
     value });
  };
//场地图片
  handleCancel = () => this.setState({
    
     previewVisible: false });
  handlePreview = async file => {
    
    
    if (!file.url && !file.preview) {
    
    
      file.preview = await getBase64(file.originFileObj);
    }
    this.setState({
    
    
      previewImage: file.url || file.preview,
      previewVisible: true,
    });
    console.log(file);
  };
  handleChange = ({
    
     fileList }) => this.setState({
    
     fileList:fileList });
  beforeUpload=(file)=>{
    
    
      this.setState(({
    
    
        fileList: [this.state.fileList, file],
      }));
    return false;
  }
  render() {
    
    
    const {
    
     previewVisible, previewImage, fileList,value} = this.state;
    const uploadButton = (
      <div>
        <Icon type="plus" />
        <div className="ant-upload-text">Upload</div>
      </div>
    );
    const {
    
     getFieldDecorator } = this.props.form;
    const formItemLayout = {
    
    
      labelCol: {
    
     span: 8 },
      wrapperCol: {
    
     span: 10 },
    };
    const props={
    
    fileList};
    return (
      <div>
        <Form>
          <FormItem{
    
    ...formItemLayout} label="现场图片">
            {
    
    getFieldDecorator('fileList',{
    
    initialValue:this.props.tAccessory,valuePropName: 'file'})
            (
              <div >
                <Upload name="file" {
    
    ...props}
                        listType="picture-card"
                        onPreview={
    
    this.handlePreview}
                        onChange={
    
    this.handleChange}
                        fileList={
    
    fileList}
                        accept=".jpg,.png,.gif,.jpeg"
                        beforeUpload={
    
    this.beforeUpload}
                >
                  {
    
    this.props.tAccessory >= 6 ? null : uploadButton}
                </Upload>
                <Modal visible={
    
    previewVisible} footer={
    
    null} onCancel={
    
    this.handleCancel}>
                  <img alt="example" style={
    
    {
    
     width: '100%' }} src={
    
    previewImage} />
                </Modal>
              </div>
            )}</FormItem>
            
    		//这里是多个上传获取到的PhotoList    
          <FormItem{
    
    ...formItemLayout} >
            {
    
    getFieldDecorator('file',{
    
    initialValue:this.props.tAccessory,valuePropName: 'file'})
            (
              <input type="hidden" name="img" multiple="multiple"  />
            )}</FormItem>
        </Form>
      </div>
    );
  }
}

function mapStateToProps(state) {
    
    
  const {
    
    csIntro,arPicture,tCsInfo,modelResult,tAccessory} = state.cusy;
  return {
    
    csIntro,arPicture,tCsInfo,modelResult,tAccessory};
}


export default connect(mapStateToProps)(Form.create()(AddMa));