fx-form-widget/es/packages/uploadFile/index.js

动态表单组件库

import _Modal from "antd/es/modal";
import _Space from "antd/es/space";
import _Upload from "antd/es/upload";
import _Button from "antd/es/button";
import _message from "antd/es/message";
import _extends from "@babel/runtime/helpers/extends";
import * as React from 'react';
import { useState, useEffect } from 'react';
import { nanoid } from 'nanoid';
import { getEnv, getToken } from '../../config/tools';
import { UploadOutlined } from '@ant-design/icons';
import { fileUpload } from './url';
import { isNotNullValue } from './tools';
import './index.less';
var API_HOST = new Map([['dev', 'https://dev-gateway.fxqifu.net/pangu'], ['qa', 'https://qa-gateway.fxqifu.net/pangu'], ['prod', 'https://gateway.fxqifu.net/pangu']]);
var UploadFileWidget = function UploadFileWidget(_ref) {
  var _ref$schema = _ref.schema,
    schema = _ref$schema === void 0 ? {} : _ref$schema,
    _ref$onChange = _ref.onChange,
    _onChange = _ref$onChange === void 0 ? function () {} : _ref$onChange,
    _ref$value = _ref.value,
    value = _ref$value === void 0 ? isNotNullValue(schema.data) ? schema.data : [] : _ref$value;
  var _schema$readonly = schema.readonly,
    readonly = _schema$readonly === void 0 ? false : _schema$readonly,
    _schema$maxFileCount = schema.maxFileCount,
    maxFileCount = _schema$maxFileCount === void 0 ? 1 : _schema$maxFileCount,
    _schema$limitedFileSi = schema.limitedFileSize,
    limitedFileSize = _schema$limitedFileSi === void 0 ? undefined : _schema$limitedFileSi,
    _schema$isMultipleUpl = schema.isMultipleUpload,
    isMultipleUpload = _schema$isMultipleUpl === void 0 ? false : _schema$isMultipleUpl,
    _schema$uploadBtnTitl = schema.uploadBtnTitle,
    uploadBtnTitle = _schema$uploadBtnTitl === void 0 ? '点击上传' : _schema$uploadBtnTitl;
  var _useState = useState([]),
    fileList = _useState[0],
    setFileList = _useState[1];
  var _useState2 = useState({
      previewVisible: false,
      previewImage: '',
      previewTitle: ''
    }),
    previewModel = _useState2[0],
    setPreviewModel = _useState2[1];
  var fileLength = 0;
  useEffect(function () {
    if (value !== null && value !== void 0 && value.length) {
      setFileList(value.filter(function (item) {
        return item.status === 'done';
      }));
    }
  }, [value]);
  var options = {
    disabled: readonly,
    multiple: isMultipleUpload
  };
  var ENV = getEnv();
  var token = getToken();
  var loadProps = _extends({}, options, {
    name: 'files',
    style: {
      width: '100 % '
    },
    action: API_HOST.get(ENV) + fileUpload,
    withCredentials: true,
    fileList: fileList,
    headers: {
      authority_token: token
    },
    // onPreview: (file) => {
    // let { url = '', name = '' } = file;
    // setPreviewModel({ previewVisible: true, previewImage: url, previewTitle: name })
    // },
    onChange: function onChange(info) {
      setFileList(info.fileList.filter(function (item) {
        return item.status === 'done';
      }));
      _onChange(info.fileList.filter(function (item) {
        return item.status === 'done';
      }));
    },
    beforeUpload: function beforeUpload(file, fileArray) {
      fileLength += 1;
      if (fileArray.length + fileList.length > maxFileCount) {
        fileLength === fileArray.length && _message.error("\u4E0A\u4F20\u4E0D\u80FD\u8D85\u8FC7" + maxFileCount + "\u4E2A\u6587\u4EF6");
        return false;
      }
      if (fileList.length < maxFileCount) {
        if (limitedFileSize) {
          return new Promise(function (resolve, reject) {
            var isUnderLimitedSize = file.size / 1024 / 1024 < limitedFileSize;
            if (!isUnderLimitedSize) {
              _message.error("\u6587\u4EF6\u5927\u5C0F\u4E0D\u80FD\u8D85\u8FC7" + limitedFileSize + "MB");
              return reject(false);
            }
            return resolve(true);
          });
        }
        return true;
      } else {
        _message.error("\u89C4\u5B9A\u4E0A\u4F20" + maxFileCount + "\u4E2A\u6587\u4EF6\uFF0C\u73B0\u5DF2\u8D85\u51FA\uFF0C\u8BF7\u5148\u5220\u9664\u5DF2\u4E0A\u4F20\u6587\u4EF6");
        return false;
      }
    }
  });
  var customProps = {
    onSuccess: function onSuccess(file) {
      var success = file.success,
        _file$data = file.data,
        data = _file$data === void 0 ? [] : _file$data;
      if (success) {
        data === null || data === void 0 ? void 0 : data.forEach(function (dataListItem) {
          fileList.push({
            uid: nanoid(4),
            name: dataListItem.originName,
            status: 'done',
            url: dataListItem.url
          });
        });
        setFileList([].concat(fileList));
        _onChange(fileList);
      } else {
        _message.error("" + file.message);
      }
    }
  };

  // 关闭弹窗
  var handleCancel = function handleCancel() {
    return setPreviewModel(_extends({}, previewModel, {
      previewVisible: false
    }));
  };

  // 渲染限制最大图片支持的大小
  var renderLimitFileSize = function renderLimitFileSize(limitedFileSize) {
    if (!limitedFileSize) {
      return null;
    }
    return /*#__PURE__*/React.createElement("div", {
      className: "tips_limitedFileSize"
    }, "\u8BF7\u4E0A\u4F20\u5927\u5C0F\u4E0D\u8D85\u8FC7", limitedFileSize, "M\u7684\u6587\u4EF6");
  };

  // 渲染最多可以上传多少张图片
  var renderMaxFileCount = function renderMaxFileCount(maxFileCount) {
    if (!maxFileCount) {
      return null;
    }
    return /*#__PURE__*/React.createElement("div", {
      className: "tips_limitedFileSize"
    }, "\u6587\u4EF6\u6700\u591A\u4E0D\u80FD\u8D85\u8FC7", maxFileCount, "\u4E2A");
  };
  return /*#__PURE__*/React.createElement("div", {
    className: "uploadFile-wrap"
  }, /*#__PURE__*/React.createElement(_Upload, _extends({}, loadProps, customProps), /*#__PURE__*/React.createElement(_Button, {
    icon: /*#__PURE__*/React.createElement(UploadOutlined, null),
    className: "upload-file-btn"
  }, uploadBtnTitle)), /*#__PURE__*/React.createElement(_Space, null, renderLimitFileSize(limitedFileSize), renderMaxFileCount(maxFileCount)), /*#__PURE__*/React.createElement(_Modal, {
    visible: previewModel.previewVisible,
    title: previewModel.previewTitle,
    footer: null,
    onCancel: handleCancel
  }, /*#__PURE__*/React.createElement("img", {
    alt: "example",
    style: {
      width: '100%'
    },
    src: previewModel.previewImage
  })));
};
export default UploadFileWidget;