linkmore-design/es/upload-oss/uploadImg.js

🌈 🚀lm组件库。🚀

import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
import _extends from "@babel/runtime/helpers/esm/extends";
import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
import React, { useState, useRef, useMemo, createContext, useContext } from 'react';
import Spin from "../spin";
import Image from "../image";
import message from "../message";
import IconFont from "../icon-font";
var Context = /*#__PURE__*/createContext();

// 视图展示
var ViewImgItem = function ViewImgItem(props) {
  var _useContext = useContext(Context),
    value = _useContext.value,
    isCheckOss = _useContext.isCheckOss,
    size = _useContext.size,
    length = _useContext.length,
    onChange = _useContext.onChange,
    previewChildren = _useContext.previewChildren;
  var externalUrl = props.externalUrl,
    filePath = props.filePath,
    realFileName = props.realFileName;

  // 是否开启OSS配置不同小图预览
  var thumbUrl = isCheckOss ? "".concat(externalUrl, "/").concat(filePath).concat(realFileName, "?x-oss-process=image/resize,w_").concat(size) : "".concat(externalUrl, "/").concat(filePath, "T").concat(size).concat(realFileName);

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

  // 受控的大图预览
  var _useState = useState(false),
    _useState2 = _slicedToArray(_useState, 2),
    visible = _useState2[0],
    setVisible = _useState2[1];

  // 预览
  var handlePreview = function handlePreview() {
    return setVisible(true);
  };

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

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

  // 上传前置处理
  var beforeUpload = function beforeUpload(e) {
    var file = e.target.files;
    // 循环文件检查是否存在不符合要求的文件
    for (var i = 0, len = file.length; i < len; i += 1) {
      var item = file[i];
      if (!type.includes(item.name.replace(/.*\./, '').toLowerCase())) {
        var content = type.join('、');
        clearInput();
        return message.warning("\u6587\u4EF6\u4E0A\u4F20\u5931\u8D25\uFF01\u4EC5\u652F\u6301".concat(content, "\u7684\u6587\u4EF6\u7C7B\u578B\uFF01"), 1.5);
      }
      if (item.size / 1024 / 1024 > fileSize) {
        clearInput();
        return message.warning("\u6587\u4EF6\u4E0A\u4F20\u5931\u8D25\uFF01\u9644\u4EF6\u5927\u5C0F\u4E0D\u80FD\u8D85\u8FC7".concat(fileSize, "M\uFF01"), 1.5);
      }
      // 单个文件上传
      fileUpload === null || fileUpload === void 0 ? void 0 : fileUpload({
        file: item,
        size: size,
        value: value,
        onChange: handleUpload,
        isImg: true
      });
    }
    return false;
  };

  // 未上传时的占位符
  var UploadPlaceholder = function UploadPlaceholder() {
    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(IconFont, {
      type: "lmweb-plus",
      style: {
        fontSize: size > 48 ? 24 : 16
      }
    }), label && /*#__PURE__*/React.createElement("div", {
      style: {
        marginTop: 8
      }
    }, required && /*#__PURE__*/React.createElement("span", {
      style: {
        color: '#FD4D4E'
      }
    }, "*"), label));
  };
  var config = {
    type: 'file',
    accept: accept,
    title: '',
    className: 'upload_input',
    onChange: beforeUpload
  };
  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Spin, {
    spinning: isLoading,
    size: "small"
  }, /*#__PURE__*/React.createElement("div", {
    className: "upload_card_box",
    style: {
      height: size,
      width: size
    }
  }, /*#__PURE__*/React.createElement("div", {
    className: "upload_card_action"
  }, /*#__PURE__*/React.createElement("input", _extends({
    ref: fielRef
  }, config)), /*#__PURE__*/React.createElement("div", null, children || /*#__PURE__*/React.createElement(UploadPlaceholder, null))))));
};
var Index = function Index(props) {
  var _props$value = props.value,
    value = _props$value === void 0 ? [] : _props$value,
    _props$length = props.length,
    length = _props$length === void 0 ? 1 : _props$length,
    _props$style = props.style,
    style = _props$style === void 0 ? {
      gap: 16
    } : _props$style;
  // 默认参数
  var defaultConfig = {
    size: 104,
    label: '上传图片',
    type: ['jpg', 'jpeg', 'png'],
    fileSize: 10
  };
  var Control = function Control() {
    if (Array.isArray(value)) {
      return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(ViewImg, null), value.length < length ? /*#__PURE__*/React.createElement(UploadCard, null) : null);
    } else {
      return /*#__PURE__*/React.createElement(React.Fragment, null, value && /*#__PURE__*/React.createElement(ViewImgItem, value), value ? null : /*#__PURE__*/React.createElement(UploadCard, null));
    }
  };
  return /*#__PURE__*/React.createElement("div", {
    className: "lm_upload_img"
  }, /*#__PURE__*/React.createElement(Context.Provider, {
    value: _objectSpread(_objectSpread({}, defaultConfig), props)
  }, /*#__PURE__*/React.createElement("div", {
    className: "upload_body",
    style: style
  }, Control())));
};
export default Index;