@fe6/water-pro/lib/_util/hooks/use-upload.js

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

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.useUpload = useUpload;
exports.useMoreUpload = useMoreUpload;
exports.acceptListString = exports.acceptList = void 0;

var _vue = require("vue");

var _shared = require("@fe6/shared");

var _message = _interopRequireDefault(require("../../message"));

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

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; }

var acceptList = ['image/png', 'image/jpeg'];
exports.acceptList = acceptList;
var acceptListString = acceptList.join(',');
exports.acceptListString = acceptListString;

function useUpload(props, params, configProvider) {
  var loading = (0, _vue.ref)(false);
  var imageName = (0, _vue.ref)('');
  var imageUrl = (0, _vue.ref)('');

  var beforeUpload = function beforeUpload(file) {
    var accept = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : acceptList;
    return new Promise(function (resolve, reject) {
      var _a;

      var isJpgOrPng = accept.includes('*') ? true : accept.includes(String(file.type));
      var uploadLocale = (_a = configProvider.locale) === null || _a === void 0 ? void 0 : _a.Upload;

      if (!isJpgOrPng) {
        _message.default.error((uploadLocale === null || uploadLocale === void 0 ? void 0 : uploadLocale.uploadFormatError) || '请上传正确格式的文件');

        loading.value = false;
        reject(false);
      }

      var uploadLimitSize = props.limitSize || 2;
      var isLt2M = file.size / 1024 / 1024 < uploadLimitSize;

      if (!isLt2M) {
        _message.default.error("".concat((uploadLocale === null || uploadLocale === void 0 ? void 0 : uploadLocale.uploadLimitMinError) || '图片必须小于', " ").concat(uploadLimitSize, "MB!"));

        loading.value = false;
        reject(false);
      }

      resolve(isLt2M);
    });
  };

  var emitMethods = function emitMethods(url, name, info) {
    var _emitData;

    var emitData = (_emitData = {}, _defineProperty(_emitData, props.urlKey, url), _defineProperty(_emitData, props.nameKey, name), _emitData);
    var uploadChange = (0, _shared.isUndefined)(props.mergeOriginDatas) ? emitData : props.mergeOriginDatas(emitData, info);
    params.emit('changeUpload', uploadChange);
    props.onFormChange(uploadChange);
  };

  var handleChange = function handleChange(info) {
    // [fix] formPro 中 autoUpload = false 的时候没有 emit 事件不方便操作
    if (!props.autoUpload) {
      emitMethods(imageUrl.value, imageName.value, info);
      return;
    }

    if (info.file.status === 'uploading') {
      loading.value = true;
      return;
    }

    if (info.file.status === 'done') {
      loading.value = false;
      var imageData = props.handleAfterAjax ? props.handleAfterAjax(info) : props.resultKey && (0, _shared.hasOwn)(info.file.response, props.resultKey) ? info.file.response[props.resultKey] : info.file.response;
      imageName.value = imageData[props.nameKey];
      imageUrl.value = imageData[props.urlKey];
      emitMethods(imageUrl.value, imageName.value, info);
    }

    if (info.file.status === 'error') {
      loading.value = false;

      _message.default.error('upload error');
    }
  };

  var removeImage = function removeImage() {
    if (!props.disabled) {
      imageName.value = '';
      imageUrl.value = '';
      emitMethods('', '', {});
    }
  };

  return {
    imageName: imageName,
    imageUrl: imageUrl,
    loading: loading,
    beforeUpload: beforeUpload,
    removeImage: removeImage,
    handleChange: handleChange,
    headers: props.headers
  };
}

function useMoreUpload(props, params) {
  var moreLoading = (0, _vue.ref)(false);
  var imageList = (0, _vue.ref)([]);

  var beforeUpload = function beforeUpload(file) {
    var accept = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : acceptList;
    return new Promise(function (resolve, reject) {
      var isJpgOrPng = accept.includes('*') ? true : accept.includes(String(file.type));

      if (!isJpgOrPng) {
        _message.default.error('请上传正确格式的文件');

        moreLoading.value = false;
        reject(false);
      }

      var uploadLimitSize = props.limitSize || 2;
      var isLt2M = file.size / 1024 / 1024 < uploadLimitSize;

      if (!isLt2M) {
        _message.default.error("\u56FE\u7247\u5FC5\u987B\u5C0F\u4E8E ".concat(uploadLimitSize, "MB!"));

        moreLoading.value = false;
        reject(false);
      }

      resolve(isLt2M);
    });
  };

  var emitMoreMethods = function emitMoreMethods(urlList, info) {
    var uploadChange = (0, _shared.isUndefined)(props.mergeOriginDatas) ? urlList : props.mergeOriginDatas(urlList, info);
    params.emit('changeUpload', uploadChange);
    props.onFormChange(uploadChange);
  };

  var handleMoreChange = function handleMoreChange(info) {
    // [fix] formPro 中 autoUpload = false 的时候没有 emit 事件不方便操作
    if (!props.autoUpload) {
      emitMoreMethods(imageList.value, info);
      return;
    }

    if (info.file.status === 'uploading') {
      moreLoading.value = true;
      return;
    }

    if (info.file.status === 'done') {
      moreLoading.value = false;
      var imageData = props.resultKey && (0, _shared.hasOwn)(info.file.response, props.resultKey) ? info.file.response[props.resultKey] : info.file.response;
      imageList.value.push(imageData[props.urlKey]);
      emitMoreMethods(imageList.value, info);
    }

    if (info.file.status === 'error') {
      moreLoading.value = false;

      _message.default.error('upload error');
    }
  };

  var removeOneImage = function removeOneImage(idx) {
    imageList.value.splice(idx, 1);
    emitMoreMethods(imageList.value, {});
  };

  return {
    imageList: imageList,
    moreLoading: moreLoading,
    beforeUpload: beforeUpload,
    removeOneImage: removeOneImage,
    handleMoreChange: handleMoreChange,
    headers: props.headers
  };
}