linkmore-design/es/lm-upload/LmUpload.js

🌈 🚀lm组件库。🚀

import _extends from "@babel/runtime/helpers/esm/extends";
import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
var _excluded = ["fileConfig", "fileNames", "components", "ossConfig"];
import React, { useRef, useMemo, forwardRef } from 'react';
import LmFilterRoot from "./wrapper/UploadRoot";
import DisabledContext from "../config-provider/DisabledContext";
import LocaleReceiver from "../locale-provider/LocaleReceiver";
var LmUpload = function LmUpload(_ref, ref) {
  var _fileConfig = _ref.fileConfig,
    fileNames = _ref.fileNames,
    components = _ref.components,
    _ossConfig = _ref.ossConfig,
    resetProps = _objectWithoutProperties(_ref, _excluded);
  var defaultRef = useRef(null);
  var disabled = React.useContext(DisabledContext);

  // 仅在初始化触发一次
  var initConfig = useMemo(function () {
    return {
      // 文件参数配置: 存储时的数据
      fileConfig: function fileConfig(fileConfigProps) {
        var file = fileConfigProps.file,
          timestamp = fileConfigProps.timestamp,
          fileName = fileConfigProps.fileName,
          filePath = fileConfigProps.filePath,
          shortlink = fileConfigProps.shortlink,
          url = fileConfigProps.url,
          realFileName = fileConfigProps.realFileName;
        return _objectSpread({
          uid: timestamp,
          fileTypeCode: file.type,
          fileTypeName: file.type,
          fileName: fileName,
          // 上传时的文件名
          realFileName: realFileName || file.name,
          // oss的文件名
          fileSize: file.size,
          internalUrl: shortlink,
          externalUrl: shortlink,
          filePath: filePath,
          seq: 0,
          url: url,
          status: 'done'
        }, _fileConfig === null || _fileConfig === void 0 ? void 0 : _fileConfig(fileConfigProps));
      },
      // 读取字段配置: 读取存储的参数字段
      fileNames: _objectSpread({
        uid: 'uid',
        fileTypeCode: 'fileTypeCode',
        fileTypeName: 'fileTypeName',
        fileName: 'fileName',
        // 上传时的文件名
        realFileName: 'realFileName',
        // oss的文件名
        fileSize: 'fileSize',
        internalUrl: 'internalUrl',
        externalUrl: 'externalUrl',
        filePath: 'filePath',
        seq: 'seq',
        url: 'url',
        status: 'status'
      }, fileNames),
      // 初始化
      components: _objectSpread({
        wrapper: null
      }, components || {})
    };
  }, []);
  var defaultProps = _objectSpread({
    size: 100,
    // 宽高大小 仅 listType 为 'card' 时有效
    fileSize: 10,
    // 限制的文件大小 M
    fileSizeType: 'M',
    // 文件大小类型 M/Mb/K/kb
    uid: 'fileName',
    // 文件列表的key字段
    accept: '',
    // 接收上传的文件类型
    type: ['jpg', 'jpeg', 'png'],
    // 文件类型
    listType: 'card',
    // 上传列表的内建样式: text/card/picture
    readOnly: false,
    // 是否只读
    disabled: disabled || false,
    // 是否禁用
    showUploadList: true,
    // 是否展示文件列表

    fileList: null,
    // 受控文件列表
    defaultFileList: [],
    // 默认已经上传的文件列表

    limit: null,
    // 允许上传的最大数量
    maxCount: null,
    // 允许上传的最大数量
    children: null,
    itemRender: null,
    // 自定义文件列表

    enabledPreview: true,
    // 是否可预览
    enabledCrop: false,
    // 是否剪裁
    enableDrag: false,
    // 是否可拖拽
    multiple: false,
    // 是否支持多选

    enabledOss: false,
    // 是否开启OSS上传
    // oss配置
    ossConfig: function ossConfig() {
      return _objectSpread({
        dir: '/BizFile/4595/Supplier/',
        // 文件路径
        region: 'oss-cn-hangzhou',
        // 所在地域
        accessKeyId: '',
        // ak
        accessKeySecret: '',
        // aks
        stsToken: '',
        // st
        bucket: 'linkmore-scm-test',
        // Bucket名称
        shortlink: 'https://linkmore-scm-test.oss-cn-hangzhou.aliyuncs.com'
      }, typeof _ossConfig === 'function' ? _ossConfig() : _ossConfig);
    },
    // 根据返回值决定是否可删除
    onRemove: function onRemove() {
      return true;
    },
    /** 是否开启粘贴快捷上传 */
    onPasteUpload: false,
    /** 是否开启设置主图 */
    showMaster: false
  }, resetProps);
  return /*#__PURE__*/React.createElement(LocaleReceiver, {
    componentName: "LmUpload"
  }, function (contextLocale) {
    return /*#__PURE__*/React.createElement(LmFilterRoot, _extends({
      ref: ref || defaultRef
    }, initConfig, defaultProps, {
      locale: contextLocale
    }));
  });
};
export default /*#__PURE__*/forwardRef(LmUpload);