mini-check/dist/h5/components/Picture/index.js

import Nerv from "nervjs";
import Taro, { showLoading as _showLoading, uploadFile as _uploadFile, hideLoading as _hideLoading, showToast as _showToast, request as _request, previewImage as _previewImage } from "@tarojs/taro-h5";
import { AtImagePicker } from 'taro-ui';
import { View, Image } from '@tarojs/components';
import classnames from 'classnames';
import { CustomLabel, ItemExtra } from '../index';
import { getItem, setItem, uuid } from "../../util/index";
import { getSignature } from '../../service/global';
import './index.scss';

class Picture extends Taro.Component {
  render() {
    const { itemExtra, multiple, editable, term, value = [], onChange, help, required, defaultValue, onView, listItemChildren } = this.props;

    const pictureOnChange = async (newfiles, type) => {
      if (editable || editable === undefined) {
        if (type === 'add') {
          let OSSData = getItem('OSSData');
          const expire = OSSData && OSSData.expire * 1000 || 0;
          if (expire < Date.now()) {
            getSignature().then(OSSDataRes => {
              if (OSSDataRes.signature) {
                setItem({ key: 'OSSData', data: OSSDataRes });
                upload(OSSDataRes, newfiles);
              }
            });
          } else {
            upload(OSSData, newfiles);
          }
        } else {
          onChange && onChange(newfiles);
        }
      }
    };
    const upload = (OSSData, newfiles) => {
      const tempFiles = newfiles.splice(value.length, newfiles.length).map(item => {
        const suffix = item.url.substring(item.url.length - 8);
        const uid = uuid();
        const fileName = uid + suffix;
        const key = OSSData.dir + fileName;
        return {
          ...item,
          key,
          fileName
        };
      });
      let count = tempFiles.length;
      tempFiles.map(currentFile => {
        _showLoading({
          title: '图片上传中',
          mask: true
        });
        const formData = {
          key: currentFile.key,
          OSSAccessKeyId: OSSData.accessId,
          policy: OSSData.policy,
          Signature: OSSData.signature,
          'Content-Disposition': `inline;filename*=UTF-8''${currentFile.fileName}`,
          success_action_status: '200'
        };
        if (Taro.getEnv() === 'WEAPP') {
          _uploadFile({
            url: OSSData.host,
            filePath: currentFile.url,
            name: 'file',
            formData,
            success: res => {
              if (res.statusCode === 200) {
                count -= 1;
                if (count === 0) {
                  const newValue = value.concat(tempFiles.map(item => {
                    return {
                      ...item,
                      url: `${OSSData.host}/${item.key}`
                    };
                  }));
                  onChange && onChange(newValue);
                  _hideLoading();
                }
              } else {
                console.log('upload fail', res);
                _showToast({
                  title: '上传图片失败',
                  icon: 'none'
                });
              }
              _hideLoading();
            },
            fail: err => {
              console.log('upload fail', err);
              _hideLoading();
              _showToast({
                title: '上传图片失败',
                icon: 'none'
              });
            }
          });
        } else {
          let hformData = new FormData();
          hformData.append('key', formData.key);
          hformData.append('OSSAccessKeyId', formData.OSSAccessKeyId);
          hformData.append('policy', formData.policy);
          hformData.append('Signature', formData.Signature);
          hformData.append('Content-Disposition', `inline;filename*=UTF-8''${encodeURI(currentFile.file.originalFileObj.name)}`);
          hformData.append('success_action_status', '200');
          hformData.append('file', currentFile.file.originalFileObj);
          _request({
            url: OSSData.host,
            method: 'POST',
            mode: 'cors',
            data: hformData,
            dataType: 'string',
            success: res => {
              if (res.statusCode === 200) {
                count -= 1;
                if (count === 0) {
                  const newValue = value.concat(tempFiles.map(item => {
                    return {
                      ...item,
                      url: `${OSSData.host}/${item.key}`
                    };
                  }));
                  onChange && onChange(newValue);
                  _hideLoading();
                }
              } else {
                _hideLoading();
                _showToast({
                  title: '上传图片失败',
                  icon: 'none'
                });
              }
            },
            fail: err => {
              console.log('fail', err);
              _hideLoading();
              _showToast({
                title: '上传图片失败',
                icon: 'none'
              });
            }
          });
        }
      });
    };
    const onFail = mes => {
      console.log(mes);
    };
    const preview = (index, file) => {
      const showValue = (value !== undefined ? value : defaultValue) || [];
      _previewImage({ current: file.url, urls: showValue.map(image => image.url) });
    };
    const showValue = (value !== undefined ? value : defaultValue) || [];
    const containerCLs = classnames(['picture-container', listItemChildren ? 'item-container' : 'item-container-margin']);
    return <View className={containerCLs}>
      <CustomLabel term={term} help={help} required={onView ? false : required} style={{ height: '20px' }} />
      {itemExtra && !onView && <View className="picture-extar-wrap">
          <ItemExtra text={itemExtra} />
        </View>}
      {editable === false || editable === undefined && onView ? <View className="image-wrap">
        {showValue.map((pic, index) => {
          return <Image key={pic.uid || index} className="image-item" src={pic.url} onClick={() => preview(index, pic)} />;
        })}
      </View> : <View className="image-picker-wrap">
          <AtImagePicker multiple={multiple} files={showValue} onChange={pictureOnChange} onFail={onFail} onImageClick={preview} />
        </View>}
    </View>;
  }

}

export default Picture;