gxxc-ui 1.0.42 → 1.0.44

package/dist/UploadUI/index.js

@@ -22,15 +22,16 @@ function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 import { DownloadOutlined, RotateLeftOutlined, RotateRightOutlined, SwapOutlined, UndoOutlined, ZoomInOutlined, ZoomOutOutlined } from '@ant-design/icons';
-import { Image, Space, Upload } from 'antd';
+import { Image, Space, Upload, Spin } from 'antd';
 import React, { useEffect, useState } from 'react';
 import { IconUI, MessageUI } from "./..";
 import { file_calculate_md5, file_url_is_image, file_url_is_video_H264, getUrlConfig } from 'gxxc-util';
 import "./index.scss";
 import { DraggerFileItems } from "./type";
+import axios from 'axios';
 // 文件名转义 后端解析地址需要排除部分符号
 var getCheckFileName = function getCheckFileName(name) {
-  var fileName = name.replace(/\s*/g, '').replace(/&/g, '_').replace(/%/g, '').replace(/\.(?=.*\.)/g, '');
+  var fileName = name.replace(/\s*/g, '').replace(/&/g, '_').replace(/%/g, '').replace(/\[/g, '').replace(/]/g, '').replace(/\.(?=.*\.)/g, '');
   return fileName;
 };
 // 获取图片base64格式
@@ -86,10 +87,15 @@ var UploadUI = function UploadUI(props) {
   useEffect(function () {
     var newFileList = (value === null || value === void 0 ? void 0 : value.map(function (item, index) {
       var _getUrlConfig, _item$url;
-      return _objectSpread(_objectSpread({}, item), {}, {
+      var param = _objectSpread(_objectSpread({}, item), {}, {
         uid: (item === null || item === void 0 ? void 0 : item.uid) || (item === null || item === void 0 ? void 0 : item.md5) || "temp_uid_".concat(Date.now(), "_").concat(index),
         name: (item === null || item === void 0 ? void 0 : item.name) || ((_getUrlConfig = getUrlConfig((_item$url = item === null || item === void 0 ? void 0 : item.url) !== null && _item$url !== void 0 ? _item$url : '')) === null || _getUrlConfig === void 0 ? void 0 : _getUrlConfig.fileName) || "file_".concat(index + 1)
       });
+      /// 如果是 h264 编码 显示第一帧
+      if (file_url_is_video_H264(param.url)) {
+        param.thumbUrl = "".concat(item.url, "?x-oss-process=video/snapshot,t_1000,f_jpg");
+      }
+      return param;
     })) || [];
     setFileList(newFileList);
   }, [value]);
@@ -104,10 +110,10 @@ var UploadUI = function UploadUI(props) {
     }
   };
 
-  // 自定义上传
+  // 自定义上传  在Form.Item 中使用受控模式 onError 等 on 方法不能使用
   var customRequest = /*#__PURE__*/function () {
     var _ref = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee(options) {
-      var md5Hash, _fileName, ossData, _ossData$body, _ossData$body2, _ossData$body3, _ossData$body4, _ossData$body5, _ossData$body6, _ossData$body7, _ossData$body8, _ossData$body9, formData, res, data, newFileList;
+      var _ossData$body, _ossData$body2, _ossData$body3, _ossData$body4, _ossData$body5, _ossData$body6, _ossData$body7, _ossData$body8, _ossData$body9, md5Hash, _fileName, ossData, item, newFileList, formData, res, _res$data, code, body, msg, errText;
       return _regeneratorRuntime().wrap(function _callee$(_context) {
         while (1) switch (_context.prev = _context.next) {
           case 0:
@@ -129,10 +135,22 @@ var UploadUI = function UploadUI(props) {
             return getOssDataAPI(scene, _fileName, md5Hash);
           case 11:
             ossData = _context.sent;
-            if (!((ossData === null || ossData === void 0 ? void 0 : ossData.code) === '0')) {
-              _context.next = 37;
+            if (!((ossData === null || ossData === void 0 ? void 0 : ossData.code) != '0')) {
+              _context.next = 16;
               break;
             }
+            if (options !== null && options !== void 0 && options.onError) options.onError(ossData === null || ossData === void 0 ? void 0 : ossData.msg, options === null || options === void 0 ? void 0 : options.file);
+            MessageUI.error(ossData === null || ossData === void 0 ? void 0 : ossData.msg);
+            return _context.abrupt("return");
+          case 16:
+            /// 设置默认 上传状态
+            item = {
+              name: _fileName,
+              status: 'uploading',
+              percent: 0
+            };
+            newFileList = [].concat(_toConsumableArray(fileList), [item]).slice(-maxCount);
+            setFileList(newFileList);
             formData = new FormData();
             formData.append('key', ossData === null || ossData === void 0 || (_ossData$body = ossData.body) === null || _ossData$body === void 0 ? void 0 : _ossData$body.dir);
             formData.append('OSSAccessKeyId', ossData === null || ossData === void 0 || (_ossData$body2 = ossData.body) === null || _ossData$body2 === void 0 ? void 0 : _ossData$body2.accessId);
@@ -143,55 +161,61 @@ var UploadUI = function UploadUI(props) {
             formData.append('accessId', ossData === null || ossData === void 0 || (_ossData$body7 = ossData.body) === null || _ossData$body7 === void 0 ? void 0 : _ossData$body7.accessId);
             formData.append('dir', ossData === null || ossData === void 0 || (_ossData$body8 = ossData.body) === null || _ossData$body8 === void 0 ? void 0 : _ossData$body8.dir);
             formData.append('file', options === null || options === void 0 ? void 0 : options.file);
-            _context.next = 25;
-            return fetch(ossData === null || ossData === void 0 || (_ossData$body9 = ossData.body) === null || _ossData$body9 === void 0 ? void 0 : _ossData$body9.host, {
-              method: 'POST',
-              body: formData
+            _context.next = 31;
+            return axios.post(ossData === null || ossData === void 0 || (_ossData$body9 = ossData.body) === null || _ossData$body9 === void 0 ? void 0 : _ossData$body9.host, formData, {
+              // 如果需要监听上传进度，可以添加此回调
+              onUploadProgress: function onUploadProgress(progressEvent) {
+                setFileList(function (prevList) {
+                  var percent = 0;
+                  if (progressEvent.total) {
+                    percent = Math.floor(progressEvent.loaded / progressEvent.total * 100);
+                  }
+                  item.percent = percent;
+                  return _toConsumableArray(prevList);
+                });
+              }
             });
-          case 25:
+          case 31:
             res = _context.sent;
-            if (!(res !== null && res !== void 0 && res.ok)) {
-              _context.next = 33;
-              break;
-            }
-            _context.next = 29;
-            return res.json();
-          case 29:
-            data = _context.sent;
-            if ((data === null || data === void 0 ? void 0 : data.code) === '0') {
-              if (options !== null && options !== void 0 && options.onSuccess) options.onSuccess(data === null || data === void 0 ? void 0 : data.body, options === null || options === void 0 ? void 0 : options.file);
-              newFileList = [].concat(_toConsumableArray(fileList), [_objectSpread(_objectSpread({}, data === null || data === void 0 ? void 0 : data.body), {}, {
-                name: _fileName
-              })]).slice(-maxCount);
-              setFileList(newFileList);
-              if (onChange) onChange(newFileList);
+            if (res.status == 200) {
+              _res$data = res.data, code = _res$data.code, body = _res$data.body, msg = _res$data.msg;
+              item.status = '';
+              if (code === '0') {
+                item.url = body.url;
+                item.md5 = body.md5;
+                /// 如果是 h264 编码 显示第一帧
+                if (file_url_is_video_H264(item.url)) {
+                  item.thumbUrl = "".concat(item.url, "?x-oss-process=video/snapshot,t_1000,f_jpg");
+                }
+                if (options !== null && options !== void 0 && options.onSuccess) options.onSuccess(item, options === null || options === void 0 ? void 0 : options.file);
+                if (onChange) {
+                  onChange(newFileList);
+                } else {
+                  setFileList(function (prevList) {
+                    return _toConsumableArray(prevList);
+                  });
+                }
+              } else {
+                if (options !== null && options !== void 0 && options.onError) options.onError(msg, options === null || options === void 0 ? void 0 : options.file);
+                MessageUI.error(msg);
+              }
             } else {
-              if (options !== null && options !== void 0 && options.onError) options.onError(data === null || data === void 0 ? void 0 : data.msg, options === null || options === void 0 ? void 0 : options.file);
-              MessageUI.error(data === null || data === void 0 ? void 0 : data.msg);
+              item.status = 'error';
+              errText = res.statusText;
+              if (options !== null && options !== void 0 && options.onError) options.onError(errText, options === null || options === void 0 ? void 0 : options.file);
+              MessageUI.error(errText);
             }
-            _context.next = 35;
+            _context.next = 38;
             break;
-          case 33:
-            if (options !== null && options !== void 0 && options.onError) options.onError(res === null || res === void 0 ? void 0 : res.statusText, options === null || options === void 0 ? void 0 : options.file);
-            MessageUI.error(res === null || res === void 0 ? void 0 : res.statusText);
           case 35:
-            _context.next = 39;
-            break;
-          case 37:
-            if (options !== null && options !== void 0 && options.onError) options.onError(ossData === null || ossData === void 0 ? void 0 : ossData.msg, options === null || options === void 0 ? void 0 : options.file);
-            MessageUI.error(ossData === null || ossData === void 0 ? void 0 : ossData.msg);
-          case 39:
-            _context.next = 44;
-            break;
-          case 41:
-            _context.prev = 41;
+            _context.prev = 35;
             _context.t0 = _context["catch"](0);
             MessageUI.error('上传失败，请稍后重试！');
-          case 44:
+          case 38:
           case "end":
             return _context.stop();
         }
-      }, _callee, null, [[0, 41]]);
+      }, _callee, null, [[0, 35]]);
     }));
     return function customRequest(_x) {
       return _ref.apply(this, arguments);
@@ -206,7 +230,6 @@ var UploadUI = function UploadUI(props) {
   };
   var onPreview = /*#__PURE__*/function () {
     var _ref2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee2(file) {
-      var mp4Url;
       return _regeneratorRuntime().wrap(function _callee2$(_context2) {
         while (1) switch (_context2.prev = _context2.next) {
           case 0:
@@ -219,25 +242,13 @@ var UploadUI = function UploadUI(props) {
           case 3:
             file.preview = _context2.sent;
           case 4:
-            if (!file_url_is_image(file.url)) {
-              _context2.next = 8;
-              break;
-            }
-            setPreviewImage(file.url || file.preview);
-            setPreviewOpen(true);
-            return _context2.abrupt("return");
-          case 8:
-            if (!file_url_is_video_H264(file.url)) {
-              _context2.next = 13;
-              break;
+            if (file_url_is_image(file.url)) {
+              setPreviewImage(file.url || file.preview);
+              setPreviewOpen(true);
+            } else {
+              open(file.url);
             }
-            mp4Url = file.url + "?x-oss-process=video/snapshot,t_1000,f_jp" || file.preview;
-            setPreviewImage(mp4Url);
-            setPreviewOpen(true);
-            return _context2.abrupt("return");
-          case 13:
-            open(file.url);
-          case 14:
+          case 5:
           case "end":
             return _context2.stop();
         }
@@ -268,13 +279,28 @@ var UploadUI = function UploadUI(props) {
     customRequest: customRequest,
     onRemove: onRemove
   }, otherProps);
+  var itemRender = function itemRender(originNode, file) {
+    if (file.status === 'uploading') {
+      return /*#__PURE__*/React.createElement("div", {
+        className: "uploadUI-mode2-content",
+        style: {
+          backgroundImage: "url(".concat(backgroundImage, ")")
+        }
+      }, /*#__PURE__*/React.createElement(Spin, {
+        percent: file.percent
+      }));
+    } else {
+      return originNode;
+    }
+  };
   return /*#__PURE__*/React.createElement(React.Fragment, null, mode === 1 && /*#__PURE__*/React.createElement(Upload, _extends({
     className: "uploadUI uploadUI-mode1 ".concat(className !== null && className !== void 0 ? className : ''),
     showUploadList: false
   }, uploadProps), children), mode === 2 && /*#__PURE__*/React.createElement(Upload, _extends({
     className: "uploadUI uploadUI-mode2 ".concat(className !== null && className !== void 0 ? className : ''),
     listType: "picture-card",
-    onPreview: onPreview
+    onPreview: onPreview,
+    itemRender: itemRender
   }, uploadProps), (fileList === null || fileList === void 0 ? void 0 : fileList.length) >= maxCount ? null : /*#__PURE__*/React.createElement("div", {
     className: "uploadUI-mode2-content",
     style: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "gxxc-ui",
-  "version": "1.0.42",
+  "version": "1.0.44",
   "description": "A react library developed with dumi",
   "license": "MIT",
   "module": "dist/index.js",
@@ -49,6 +49,7 @@
     "@wangeditor/editor": "^5.1.23",
     "@wangeditor/editor-for-react": "^1.0.6",
     "antd": "^5.27.1",
+    "axios": "^1.7.9",
     "dayjs": "^1.11.11",
     "lodash": "^4.17.21",
     "react-countup": "^6.5.3",