linkmore-design/lib/upload-oss/uploadBtn.js

🌈 🚀lm组件库。🚀

"use strict";

var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _react = _interopRequireWildcard(require("react"));
var _spin = _interopRequireDefault(require("../spin"));
var _message = _interopRequireDefault(require("../message"));
var _classnames = _interopRequireDefault(require("classnames"));
var _iconFont = _interopRequireDefault(require("../icon-font"));
const UploadBox = props => {
  const {
    value = [],
    onChange,
    label = '上传文件',
    icon = /*#__PURE__*/_react.default.createElement(_iconFont.default, {
      type: "lmweb-cloud-upload",
      className: "upload_btn_icon"
    }),
    length = 10,
    accept,
    type = ['xls', 'xlsx', 'jpg', 'png'],
    size = 'small',
    fileSize = 50,
    multiple,
    children,
    fileUpload,
    isLoading,
    valueType = 'object'
  } = props;
  const fielRef = (0, _react.useRef)(null);
  const clearInput = () => {
    if (fielRef.current?.value) {
      fielRef.current.value = '';
    }
  };

  // 触发外部OnChange事件
  const handleUpload = file => {
    const nValue = valueType === 'array' ? [...value, file] : file;
    onChange?.(nValue);
    clearInput();
  };

  // 上传前置处理
  const beforeUpload = e => {
    const file = e.target.files;
    if (length > 0 && file.length + value.length > length) {
      return _message.default.warning(`文件上传失败！最多只能上传${length}个文件`, 1.5);
    }

    // 循环文件检查是否存在不符合要求的文件
    for (let i = 0, len = file.length; i < len; i += 1) {
      const item = file[i];
      if (!type.includes(item.name.replace(/.*\./, '').toLowerCase())) {
        const content = type.join('、');
        clearInput();
        return _message.default.warning(`文件上传失败！仅支持${content}的文件类型！`, 1.5);
      }
      if (item.size / 1024 / 1024 > fileSize) {
        clearInput();
        return _message.default.warning(`文件上传失败！附件大小不能超过${fileSize}M！`, 1.5);
      }
      // 单个文件上传
      fileUpload?.({
        file: item,
        size,
        value,
        onChange: handleUpload
      });
    }
    return false;
  };
  const config = {
    type: 'file',
    multiple,
    accept,
    title: '',
    className: 'upload_input',
    onChange: beforeUpload
  };
  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_spin.default, {
    spinning: isLoading,
    size: "small"
  }, /*#__PURE__*/_react.default.createElement("div", {
    className: "upload_diy"
  }, /*#__PURE__*/_react.default.createElement("input", (0, _extends2.default)({
    ref: fielRef
  }, config)), children || /*#__PURE__*/_react.default.createElement("div", {
    className: (0, _classnames.default)('upload_btn', {
      small: size === 'small'
    })
  }, icon, /*#__PURE__*/_react.default.createElement("div", {
    className: "upload_btn_text"
  }, label)))));
};
const Index = props => {
  return /*#__PURE__*/_react.default.createElement("div", {
    className: "lm_upload_btn"
  }, /*#__PURE__*/_react.default.createElement("div", {
    className: "upload_body"
  }, /*#__PURE__*/_react.default.createElement(UploadBox, props)));
};
var _default = Index;
exports.default = _default;