linkmore-design/lib/upload-oss/uploadImg.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 _image = _interopRequireDefault(require("../image"));
var _message = _interopRequireDefault(require("../message"));
var _iconFont = _interopRequireDefault(require("../icon-font"));
const Context = /*#__PURE__*/(0, _react.createContext)();

// 视图展示
const ViewImgItem = props => {
  const {
    value,
    isCheckOss,
    size,
    length,
    onChange,
    previewChildren
  } = (0, _react.useContext)(Context);
  const {
    externalUrl,
    filePath,
    realFileName
  } = props;

  // 是否开启OSS配置不同小图预览
  const thumbUrl = isCheckOss ? `${externalUrl}/${filePath}${realFileName}?x-oss-process=image/resize,w_${size}` : `${externalUrl}/${filePath}T${size}${realFileName}`;

  // 重置尺寸大小
  const resetSize = (0, _react.useMemo)(() => {
    const gap = size > 60 ? 18 : 10;
    const width = size - gap;
    const padding = size > 60 ? 8 : 4;
    const fontSize = size > 60 ? 16 : 14;
    return {
      width,
      padding,
      fontSize
    };
  }, [size]);

  // 受控的大图预览
  const [visible, setVisible] = (0, _react.useState)(false);

  // 预览
  const handlePreview = () => setVisible(true);

  // 删除
  const handleDelete = () => {
    const nValue = length > 1 ? value.filter(v => v.realFileName !== realFileName) : null;
    onChange?.(nValue);
  };
  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
    className: "view_box",
    style: {
      padding: resetSize.padding
    }
  }, /*#__PURE__*/_react.default.createElement("div", {
    className: "view_item_thum",
    style: {
      width: resetSize.width,
      height: resetSize.width
    }
  }, /*#__PURE__*/_react.default.createElement(_image.default, {
    width: resetSize.width,
    height: resetSize.width,
    src: thumbUrl,
    preview: {
      visible,
      src: `${externalUrl}/${filePath}${realFileName}`,
      onVisibleChange: val => setVisible(val)
    }
  }), /*#__PURE__*/_react.default.createElement("div", {
    className: "view_item_action"
  }, /*#__PURE__*/_react.default.createElement("div", {
    className: "view_item_action_icon",
    style: {
      fontSize: resetSize.fontSize
    }
  }, /*#__PURE__*/_react.default.createElement("div", {
    className: "view_item_preview",
    onClick: handlePreview
  }, /*#__PURE__*/_react.default.createElement(_iconFont.default, {
    type: "lmweb-eye"
  })), /*#__PURE__*/_react.default.createElement("div", {
    className: "view_item_delete",
    onClick: handleDelete
  }, /*#__PURE__*/_react.default.createElement(_iconFont.default, {
    type: "lmweb-delete"
  }))), previewChildren && previewChildren(props)))));
};
const ViewImg = () => {
  const {
    value
  } = (0, _react.useContext)(Context);
  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, value?.map((v, idx) => /*#__PURE__*/_react.default.createElement(ViewImgItem, (0, _extends2.default)({
    key: v.realFileName || idx
  }, v))));
};
const UploadCard = () => {
  const {
    value = [],
    onChange,
    size,
    length,
    label = '上传图片',
    required,
    accept,
    type = ['jpg', 'jpeg', 'png'],
    fileSize = 10,
    children,
    fileUpload,
    isLoading,
    valueType = 'object'
  } = (0, _react.useContext)(Context);
  const fielRef = (0, _react.useRef)(null);
  const clearInput = () => {
    if (fielRef.current?.value) {
      fielRef.current.value = null;
    }
  };

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

  // 上传前置处理
  const beforeUpload = e => {
    const file = e.target.files;
    // 循环文件检查是否存在不符合要求的文件
    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,
        isImg: true
      });
    }
    return false;
  };

  // 未上传时的占位符
  const UploadPlaceholder = () => /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_iconFont.default, {
    type: "lmweb-plus",
    style: {
      fontSize: size > 48 ? 24 : 16
    }
  }), label && /*#__PURE__*/_react.default.createElement("div", {
    style: {
      marginTop: 8
    }
  }, required && /*#__PURE__*/_react.default.createElement("span", {
    style: {
      color: '#FD4D4E'
    }
  }, "*"), label));
  const config = {
    type: 'file',
    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_card_box",
    style: {
      height: size,
      width: size
    }
  }, /*#__PURE__*/_react.default.createElement("div", {
    className: "upload_card_action"
  }, /*#__PURE__*/_react.default.createElement("input", (0, _extends2.default)({
    ref: fielRef
  }, config)), /*#__PURE__*/_react.default.createElement("div", null, children || /*#__PURE__*/_react.default.createElement(UploadPlaceholder, null))))));
};
const Index = props => {
  const {
    value = [],
    length = 1,
    style = {
      gap: 16
    }
  } = props;
  // 默认参数
  const defaultConfig = {
    size: 104,
    label: '上传图片',
    type: ['jpg', 'jpeg', 'png'],
    fileSize: 10
  };
  const Control = () => {
    if (Array.isArray(value)) {
      return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(ViewImg, null), value.length < length ? /*#__PURE__*/_react.default.createElement(UploadCard, null) : null);
    } else {
      return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, value && /*#__PURE__*/_react.default.createElement(ViewImgItem, value), value ? null : /*#__PURE__*/_react.default.createElement(UploadCard, null));
    }
  };
  return /*#__PURE__*/_react.default.createElement("div", {
    className: "lm_upload_img"
  }, /*#__PURE__*/_react.default.createElement(Context.Provider, {
    value: {
      ...defaultConfig,
      ...props
    }
  }, /*#__PURE__*/_react.default.createElement("div", {
    className: "upload_body",
    style: style
  }, Control())));
};
var _default = Index;
exports.default = _default;