@fe6/water-pro/es/upload-image/src/upload-image.js

An enterprise-class UI design language and Vue-based implementation

import { withDirectives as _withDirectives, vShow as _vShow, createVNode as _createVNode } from "vue";

function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }

import _regeneratorRuntime from "@babel/runtime/regenerator";

/** @format */
import { __awaiter } from "tslib";
import { defineComponent, watchEffect, ref, inject } from 'vue';
import { LoadingOutlined, EyeOutlined, DeleteOutlined } from '@ant-design/icons-vue';
import { Upload } from '../../upload';
import Image from '../../image';
import Modal from '../../modal';
import ToolTip from '../../tooltip';
import { acceptListString, useUpload } from '../../_util/hooks/use-upload';
import PropTypes from '../../_util/vue-types';
import useConfigInject from '../../_util/hooks/useConfigInject';
import { defaultConfigProvider } from '../../config-provider';
import { getSlot } from '../../_util/props-util';
import { errorUploadImage } from '../../config-provider/error-image';
export default defineComponent({
  name: 'AUploadImage',
  components: {
    LoadingOutlined: LoadingOutlined
  },
  props: {
    value: PropTypes.string,
    onFormChange: {
      type: Function,
      default: function _default() {}
    },
    mergeOriginDatas: {
      type: Function,
      default: undefined
    },
    action: PropTypes.string,
    accept: PropTypes.string.def(acceptListString),
    autoUpload: PropTypes.bool.def(true),
    headers: PropTypes.object,
    urlKey: PropTypes.string.def('url'),
    resultKey: PropTypes.string.def('data'),
    nameKey: PropTypes.string.def('name'),
    imageWidth: PropTypes.number.def(100),
    imageHeight: PropTypes.number.def(100),
    limitSize: PropTypes.number.def(2),
    placeholder: PropTypes.string,
    errorImage: PropTypes.string,
    disabled: PropTypes.bool,
    allowUpdate: PropTypes.bool.def(false)
  },
  emits: ['changeUpload', 'change'],
  setup: function setup(props, params) {
    var _this = this;

    var _useConfigInject = useConfigInject('upload-image', props),
        prefixClsNew = _useConfigInject.prefixCls,
        configProvider = _useConfigInject.configProvider; // TODO [fix] 解决使用的过程中未用 configProvider 报错


    var _ref = inject('configProvider', defaultConfigProvider) || defaultConfigProvider,
        errorImageDef = _ref.errorImage;

    var _useUpload = useUpload(props, params, configProvider),
        loading = _useUpload.loading,
        beforeUpload = _useUpload.beforeUpload,
        handleChange = _useUpload.handleChange,
        imageUrl = _useUpload.imageUrl;

    watchEffect(function () {
      return __awaiter(_this, void 0, void 0, /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
        return _regeneratorRuntime.wrap(function _callee$(_context) {
          while (1) {
            switch (_context.prev = _context.next) {
              case 0:
                // NOTE 去掉为空判断，素材中心，通字段再打开图片保留问题
                imageUrl.value = props.value;

              case 1:
              case "end":
                return _context.stop();
            }
          }
        }, _callee);
      }));
    });

    var beforeUploadFn = function beforeUploadFn(file) {
      return beforeUpload(file, props.accept.split(','));
    };

    return {
      loading: loading,
      beforeUploadFn: beforeUploadFn,
      handleChange: handleChange,
      imageUrl: imageUrl,
      prefixClsNew: prefixClsNew,
      errorBackImage: props.errorImage || errorImageDef || errorUploadImage,
      previewPoseterVisible: ref(false),
      configProvider: configProvider
    };
  },
  render: function render() {
    var _this2 = this;

    var _a, _b, _c;

    var imageNode = null;

    if (this.imageUrl) {
      imageNode = _createVNode(Image, {
        "width": this.imageWidth,
        "height": this.imageHeight,
        "src": this.imageUrl,
        "bordered": false,
        "class": ["".concat(this.prefixClsNew, "-img"), _defineProperty({}, "".concat(this.prefixClsNew, "-img-disabled"), this.disabled)],
        "preview": false,
        "fallback": this.errorBackImage
      }, null);
    }

    var placeholderNode = null;

    if (this.placeholder) {
      placeholderNode = _createVNode("p", {
        "class": "".concat(this.prefixClsNew, "-tip")
      }, [this.placeholder]);
    }

    var loadingNode = [_withDirectives(_createVNode("div", null, [_createVNode("p", {
      "class": "".concat(this.prefixClsNew, "-tip")
    }, [((_a = this.configProvider.locale) === null || _a === void 0 ? void 0 : _a.UploadImage.placeholder) || '上传']), placeholderNode]), [[_vShow, !this.loading]])];
    var placeholderSlotNode = getSlot(this, 'placeholder');

    if (placeholderSlotNode.length) {
      loadingNode = placeholderSlotNode;
    }

    var nodeHtml = null;

    if (this.allowUpdate && this.imageUrl) {
      var handlePoseterPreview = function handlePoseterPreview() {
        return __awaiter(_this2, void 0, void 0, /*#__PURE__*/_regeneratorRuntime.mark(function _callee2() {
          return _regeneratorRuntime.wrap(function _callee2$(_context2) {
            while (1) {
              switch (_context2.prev = _context2.next) {
                case 0:
                  this.previewPoseterVisible = true;

                case 1:
                case "end":
                  return _context2.stop();
              }
            }
          }, _callee2, this);
        }));
      };

      var handlePoseterCancel = function handlePoseterCancel() {
        _this2.previewPoseterVisible = false;
      };

      var removeOneImage = function removeOneImage() {
        _this2.imageUrl = '';

        _this2.$emit('changeUpload', '');
      };

      nodeHtml = _createVNode("div", {
        "class": "".concat(this.prefixClsNew, "-handle-box")
      }, [imageNode, _createVNode("div", {
        "class": "".concat(this.prefixClsNew, "-handle")
      }, [_createVNode(ToolTip, {
        "title": (_b = this.configProvider.locale) === null || _b === void 0 ? void 0 : _b.UploadImage.seePlaceholder
      }, {
        default: function _default() {
          return [_createVNode(EyeOutlined, {
            "class": "".concat(_this2.prefixClsNew, "-handle-icon"),
            "onClick": handlePoseterPreview
          }, null)];
        }
      }), _createVNode(ToolTip, {
        "title": (_c = this.configProvider.locale) === null || _c === void 0 ? void 0 : _c.UploadImage.removePlaceholder
      }, {
        default: function _default() {
          return [_createVNode(DeleteOutlined, {
            "onClick": removeOneImage
          }, null)];
        }
      })]), _createVNode(Modal, {
        "visible": this.previewPoseterVisible,
        "footer": null,
        "onCancel": handlePoseterCancel
      }, {
        default: function _default() {
          return [_createVNode("img", {
            "style": "width: 100%",
            "src": _this2.imageUrl
          }, null)];
        }
      })]);
    } else {
      nodeHtml = _createVNode(Upload, {
        "accept": this.accept,
        "class": this.prefixClsNew,
        "show-upload-list": false,
        "action": this.autoUpload ? this.action : '',
        "headers": this.headers,
        "disabled": this.disabled,
        "before-upload": this.beforeUploadFn,
        "onChange": this.handleChange
      }, {
        default: function _default() {
          return [_withDirectives(_createVNode("div", {
            "class": "".concat(_this2.prefixClsNew, "-btn")
          }, [_withDirectives(_createVNode(LoadingOutlined, null, null), [[_vShow, _this2.loading]]), loadingNode]), [[_vShow, !_this2.imageUrl]]), imageNode];
        }
      });
    }

    return nodeHtml;
  }
});