syber-lowcode-business-materials/es/components/custom-upload/index.js

syber-lowcode-business-materials

import _Upload from "antd/es/upload";
import _Modal from "antd/es/modal";
import _message from "antd/es/message";
import _extends from "@babel/runtime/helpers/extends";
import React, { useState, useRef, useEffect } from 'react';
import UploadHelp from "../../utils/function/UploadHelp";
import { withSingleChild } from "../../utils/hoc";
var CustomUpload = function CustomUpload(props) {
  var _appHelper$constants, _appHelper$utils;
  var appHelper = React.useContext(window.__appContext).appHelper;
  var platformType = (appHelper === null || appHelper === void 0 ? void 0 : (_appHelper$constants = appHelper.constants) === null || _appHelper$constants === void 0 ? void 0 : _appHelper$constants.__platformType) || "platform";
  var uploadHelpRef = useRef(new UploadHelp({
    request: appHelper === null || appHelper === void 0 ? void 0 : (_appHelper$utils = appHelper.utils) === null || _appHelper$utils === void 0 ? void 0 : _appHelper$utils._request,
    platformType: platformType
  }));
  var _useState = useState(props.fileListControlled || []),
    fileList = _useState[0],
    setFileList = _useState[1];
  useEffect(function () {
    var _props$onChange, _props$onFileListChan;
    (_props$onChange = props.onChange) === null || _props$onChange === void 0 ? void 0 : _props$onChange.call(props, fileList);
    (_props$onFileListChan = props.onFileListChange) === null || _props$onFileListChan === void 0 ? void 0 : _props$onFileListChan.call(props, fileList);
  }, [JSON.stringify(fileList)]);
  useEffect(function () {
    var _props$onChange2;
    setFileList(props.fileListControlled);
    (_props$onChange2 = props.onChange) === null || _props$onChange2 === void 0 ? void 0 : _props$onChange2.call(props, fileList);
  }, [JSON.stringify(props.fileListControlled || [])]);
  var handleChange = function handleChange(_ref) {
    var newFileList = _ref.fileList;
    // 处理响应数据，将上传结果URL同步到文件列表
    var updatedList = newFileList.map(function (file) {
      if (file.response) {
        return _extends({}, file, {
          url: file.response.url
        });
      }
      return file;
    });

    // 处理文件数量限制
    if (props.size && updatedList.length > props.size) {
      setFileList(updatedList.slice(0, props.size));
      return;
    }
    setFileList(updatedList);
  };
  var customProps = _extends({}, props, {
    onChange: handleChange,
    beforeUpload: function beforeUpload(_, files) {
      if (props.size && (files === null || files === void 0 ? void 0 : files.length) + ((fileList === null || fileList === void 0 ? void 0 : fileList.length) || 0) > props.size) {
        _message.warning('超出文件数量限制');
        return false;
      }
      console.log("true", true);
      return true;
    },
    onPreview: function onPreview(file) {
      var _file$type;
      if (!file.url) {
        _message.info("未上传完成");
        return;
      }
      if ((_file$type = file.type) !== null && _file$type !== void 0 && _file$type.includes('image') || /^https?:\/\/[^\s]+?\.(?:jpg|jpeg|png|gif|bmp|webp|tiff|svg)/i.test(file.url)) {
        //是图片
        _Modal.info({
          title: "预览图片",
          icon: null,
          width: '80%',
          centered: true,
          content: /*#__PURE__*/React.createElement("div", {
            style: {
              textAlign: 'center',
              maxHeight: '70vh',
              overflow: 'auto'
            }
          }, /*#__PURE__*/React.createElement("img", {
            src: file.url,
            alt: ""
          }))
        });
      } else {
        window.open(file.url);
      }
    },
    customRequest: function customRequest(_ref2) {
      var file = _ref2.file,
        onSuccess = _ref2.onSuccess,
        onError = _ref2.onError,
        onProgress = _ref2.onProgress;
      console.log('上传文件', file);
      try {
        var fileName = file.name;
        var fileType = fileName.slice(fileName.lastIndexOf('.') + 1);
        var uploadFunc = props.uniq ? uploadHelpRef.current.uploadUniq.bind(uploadHelpRef.current) : uploadHelpRef.current.upload.bind(uploadHelpRef.current);
        uploadFunc(file, fileType, function (code, msg, json) {
          var _props$onFileUploadSu;
          onSuccess({
            url: json.url
          }, file); // 传递下载地址
          _message.success(msg);
          (_props$onFileUploadSu = props.onFileUploadSuccess) === null || _props$onFileUploadSu === void 0 ? void 0 : _props$onFileUploadSu.call(props, json);
        }, function (code, msg) {
          var _props$onFileUploadEr;
          onError(new Error(msg));
          _message.error(msg);
          (_props$onFileUploadEr = props.onFileUploadError) === null || _props$onFileUploadEr === void 0 ? void 0 : _props$onFileUploadEr.call(props, msg);
        }, function (_ref3) {
          var _props$onFileUploadPr;
          var total = _ref3.total;
          onProgress({
            percent: total.percent
          });
          (_props$onFileUploadPr = props.onFileUploadProgress) === null || _props$onFileUploadPr === void 0 ? void 0 : _props$onFileUploadPr.call(props, total);
        });
      } catch (err) {
        onError(err);
        console.error(err);
        _message.error('上传失败');
      }
    }
  });
  return /*#__PURE__*/React.createElement(_Upload, _extends({}, customProps, {
    fileList: fileList
  }));
};
export default withSingleChild(CustomUpload, ['children']);