可预览图片组件

/**
 * 可预览图片
 */
import React, { Component } from 'react';
import { ImagePicker } from 'antd-mobile';
import { Toast } from '@/pages/project/yjpt/components/PandaToast.jsx'
import envconfig from "@/envconfig/envconfig";
import Carousel, { ModalGateway, Modal } from 'react-images'

import './index.less';

class PicturePreview extends Component {

  static defaultProps = {
    label: '',
    name: '',
    value: '',
    placeholder: '',
    readOnly: 0
  }

  state = {
    isShowModal: false
  }

  toggleModal = () => {
    this.setState({
      isShowModal: !this.state.isShowModal
    })
  }

  mapUrl = (url) => {
    if(url.includes('base64')) {
      return url;
    }
    return `${envconfig.pandaURL}/cityinterface/rest/services/filedownload.svc/download${url}`;
  }

  handleChange = (files, type) => {
    if(type === 'add') {
      const len = files.length;
      const newFile = files[len - 1];
      this.uploadImage(newFile);
    } else if(type === 'remove') {
      const { value } = this.props;
      const urls = value.split(',');
      const removeUrl = urls.filter(url => !files.find(file => file.url === url));
      if(removeUrl.length > 0) {
        this.deleteImage(removeUrl[0]);
      }
    }
  }

  uploadImage = async (fileData) => {
    const { url, file } = fileData;
    const { upload, value, name, onChange } = this.props;
    const formData = new FormData();
    formData.append('filedata', file);
    const now = +new Date();
    const imgType = url.split(';')[0].split('/')[1] || 'png';
    const path = `/WebApp/${name}/${now}.${imgType}`;
    const params = {
      imagePath: path,
      data: formData
    }
    Toast.loading('图片上传中...', 0);
    const res = await upload(params);
    Toast.hide();
    if(res.success) {
      let newVal = '';
      if(value === '') {
        newVal = path;
      } else {
        newVal = value + ',' + path;
      }
      onChange && typeof onChange === 'function' && onChange(name, newVal);
    }
  }

  deleteImage = async (url) => {
    const { deleteImage, value, onChange, name } = this.props;
    const params = {
      imagePath: url
    };
    Toast.loading('图片删除中...', 0);
    const res = await deleteImage(params);
    Toast.hide();
    if(!!res.status) {
      const urls = value.split(',');
      const newUrls = urls.filter(u => u !== url);
      console.log(urls, newUrls, url);
      onChange && typeof onChange === 'function' && onChange(name, newUrls.join(','));
    }
  }

  render() {
    const { isShowModal } = this.state;
    const { label = '', name = '', value = '', placeholder = '', readOnly = 0, unit = '', max = 4 } = this.props;
    const files = value.split(',').filter(url => !!url).map(url => ({
      url: this.mapUrl(url)
    }));
    const views = files.map((item) => {
      return {
        src: item.url
      }
    })
    return (
      <div className={`PicturePreview`}>
        <div className="label">{label}</div>
        <ImagePicker
          files={files}
          onChange={this.handleChange}
          onImageClick={this.toggleModal}
          disableDelete={readOnly}
          selectable={(files.length < max) && !readOnly}
        />
        <ModalGateway>
          {isShowModal ? (
            <Modal onClose={this.toggleModal}>
              <Carousel views={views} />
            </Modal>
          ) : null}
        </ModalGateway>
      </div>
    );
  }
}

export default PicturePreview;

.PicturePreview {
  display: flex;
  align-items: center;
  height: 2rem;
  background-color: #FFFFFF;
  padding: 0 0.54rem 0 0.49rem;
  font-size: 0.42rem;

  .label {
    flex: 0 0 2.61rem;
    color: #2E2E2E;
  }

  .am-image-picker {
    flex: 1;
    height: 1.5rem;

    &-list {
      padding: 0;
      margin-bottom: 0;
    }
  }

  .value {
    display: flex;
    flex: 1;
    align-items: center;
    height: 100%;
    color: #333333;
    border: none;
    &.disabled {
      color: #666666;
      opacity: 1 !important; // 兼容ios
    }
  }

  .unit {
    margin-left: 0.2rem;
    opacity: 0.8;
  }
  
  input:-webkit-autofill {
    box-shadow: 0 0 1000px #FFFFFF inset;
  }
  input:disabled {
    background-color: #FFFFFF;
    color: #666666 !important;
    opacity: 1 !important; // 兼容ios
  }
  input:-ms-input-placeholder,
  input:-moz-placeholder,
  input:-webkit-input-placeholder {
    color: #C3C3C3;
  }
}