FEV2 / fw-cms

Commit 2add803f74c84d1127f7221c20d94b98793c348d

Authored by 王强
1 parent 9251004f

修改 通用组件-FeeweeUploadAttachment，添加上传进度交互；

Inline Side-by-side
Showing 1 changed file with 244 additions and 138 deletions
src/components/FeeweeUploadAttachment/index.tsx
  View file @2add803
1 1 /*
2 2 * @Date: 2021-01-05 14:24:23
3 3 * @LastEditors: wangqiang@feewee.cn
4   - * @LastEditTime: 2022-10-10 17:10:43
  4 + * @LastEditTime: 2022-10-10 17:54:30
5 5 */
6 6 import React, { useEffect, useRef, useState } from "react";
7 7 import { message, Popover, Spin, Upload } from "antd";
... ... @@ -10,6 +10,7 @@ import {
10 10 EyeOutlined,
11 11 DeleteOutlined,
12 12 FileTwoTone,
  13 + LoadingOutlined,
13 14 } from "@ant-design/icons";
14 15 import { UploadProps } from "antd/lib/upload";
15 16 import {
... ... @@ -176,7 +177,7 @@ export default function FeeweeUploadAttachment({
176 177 const onFileRemove = async (file: UploadFile) => {
177 178 if (removingFileFidList.current.includes(file?.response?.fid)) return false;
178 179  
179   - if (file.status === "error") {
  180 + if (file.status === "error" || file?.status === "uploading") {
180 181 setFileList(fileList.filter((_file) => _file.uid !== file.uid));
181 182 return true;
182 183 }
... ... @@ -265,42 +266,80 @@ const ListTypeOfText = ({
265 266 } ant-upload-list-item-list-type-text`}
266 267 >
267 268 <div className="ant-upload-list-item-info">
268   - <span className="ant-upload-span">
269   - <div className="ant-upload-text-icon">
270   - <LinkOutlined />
271   - </div>
272   - <a
273   - target="_blank"
274   - rel="noopener noreferrer"
275   - className="ant-upload-list-item-name"
276   - title={file?.name}
277   - href={
278   - file?.status === "error"
279   - ? undefined
280   - : IMGURL.showImage(file?.response?.data)
281   - }
282   - type={file?.type}
283   - download={file?.name}
284   - >
285   - {file?.name}({file?.size ? getFileSize(file?.size) : ""})
286   - </a>
287   - {/* @ts-ignore */}
288   - {file?.status === "error" && file?.errMsg ? (
289   - // @ts-ignore
290   - <span>{file?.errMsg}</span>
291   - ) : null}
292   - <span className="ant-upload-list-item-card-actions">
293   - <button
294   - title="删除文件"
295   - type="button"
296   - onClick={() => remove()}
297   - className="ant-btn ant-btn-text ant-btn-sm ant-btn-icon-only ant-upload-list-item-card-actions-btn"
  269 + {file?.status === "uploading" ? (
  270 + <span className="ant-upload-span">
  271 + <div className="ant-upload-text-icon">
  272 + <LoadingOutlined />
  273 + </div>
  274 + <span
  275 + className="ant-upload-list-item-name"
  276 + title={`${file?.name}(${
  277 + file?.size ? getFileSize(file?.size) : ""
  278 + })`}
298 279 >
299   - <DeleteOutlined />
300   - </button>
  280 + {file?.name}({file?.size ? getFileSize(file?.size) : ""})
  281 + </span>
  282 + <span className="ant-upload-list-item-card-actions">
  283 + <button
  284 + title="删除文件"
  285 + type="button"
  286 + onClick={() => remove()}
  287 + className="ant-btn ant-btn-text ant-btn-sm ant-btn-icon-only ant-upload-list-item-card-actions-btn"
  288 + >
  289 + <DeleteOutlined />
  290 + </button>
  291 + </span>
301 292 </span>
302   - </span>
  293 + ) : (
  294 + <span className="ant-upload-span">
  295 + <div className="ant-upload-text-icon">
  296 + <LinkOutlined />
  297 + </div>
  298 + <a
  299 + target="_blank"
  300 + rel="noopener noreferrer"
  301 + className="ant-upload-list-item-name"
  302 + title={file?.name}
  303 + href={
  304 + file?.status === "error"
  305 + ? undefined
  306 + : IMGURL.showImage(file?.response?.data)
  307 + }
  308 + >
  309 + {file?.name}({file?.size ? getFileSize(file?.size) : ""})
  310 + </a>
  311 + {/* @ts-ignore */}
  312 + {file?.status === "error" && file?.errMsg ? (
  313 + // @ts-ignore
  314 + <span>{file?.errMsg}</span>
  315 + ) : null}
  316 + <span className="ant-upload-list-item-card-actions">
  317 + <button
  318 + title="删除文件"
  319 + type="button"
  320 + onClick={() => remove()}
  321 + className="ant-btn ant-btn-text ant-btn-sm ant-btn-icon-only ant-upload-list-item-card-actions-btn"
  322 + >
  323 + <DeleteOutlined />
  324 + </button>
  325 + </span>
  326 + </span>
  327 + )}
303 328 </div>
  329 + {file?.status === "uploading" ? (
  330 + <div className="ant-upload-list-item-progress">
  331 + <div className="ant-progress ant-progress-line ant-progress-status-normal ant-progress-default">
  332 + <div className="ant-progress-outer">
  333 + <div className="ant-progress-inner">
  334 + <div
  335 + className="ant-progress-bg"
  336 + style={{ width: `${file?.percent || 0}%`, height: 2 }}
  337 + />
  338 + </div>
  339 + </div>
  340 + </div>
  341 + </div>
  342 + ) : null}
304 343 </div>
305 344 </div>
306 345 );
... ... @@ -345,67 +384,91 @@ const ListTypeOfPictureCard = ({
345 384 } ant-upload-list-item-list-type-picture-card`}
346 385 >
347 386 <div className="ant-upload-list-item-info">
348   - <span className="ant-upload-span">
  387 + {file?.status === "uploading" ? (
  388 + <span className="ant-upload-span">
  389 + <div className="ant-upload-list-item-thumbnail">文件上传中</div>
  390 + <span className="ant-upload-list-item-name" title={file?.name}>
  391 + {file?.name}
  392 + </span>
  393 + </span>
  394 + ) : (
  395 + <span className="ant-upload-span">
  396 + <a
  397 + className="ant-upload-list-item-thumbnail ant-upload-list-item-file"
  398 + href={
  399 + file?.status === "error"
  400 + ? undefined
  401 + : IMGURL.showImage(file?.response?.data)
  402 + }
  403 + target="_blank"
  404 + rel="noopener noreferrer"
  405 + >
  406 + {file?.type?.includes("image") ? (
  407 + <img
  408 + src={IMGURL.showImage(
  409 + file?.thumbUrl || file?.response?.data
  410 + )}
  411 + alt={`${file?.name}(${
  412 + file?.size ? getFileSize(file?.size) : ""
  413 + })`}
  414 + className="ant-upload-list-item-image"
  415 + />
  416 + ) : (
  417 + <FileTwoTone style={{ fontSize: 26 }} />
  418 + )}
  419 + </a>
  420 + <span
  421 + className="ant-upload-list-item-name"
  422 + style={{
  423 + display: file?.type?.includes("image") ? "none" : undefined,
  424 + }}
  425 + title={`${file?.name}(${
  426 + file?.size ? getFileSize(file?.size) : ""
  427 + })`}
  428 + >
  429 + {file?.name}({file?.size ? getFileSize(file?.size) : ""})
  430 + </span>
  431 + </span>
  432 + )}
  433 + </div>
  434 + {file?.status === "uploading" ? (
  435 + <div className="ant-upload-list-item-progress">
  436 + <div className="ant-progress ant-progress-line ant-progress-status-normal ant-progress-default">
  437 + <div className="ant-progress-outer">
  438 + <div className="ant-progress-inner">
  439 + <div
  440 + className="ant-progress-bg"
  441 + style={{ width: `${file?.percent || 0}%`, height: 2 }}
  442 + />
  443 + </div>
  444 + </div>
  445 + </div>
  446 + </div>
  447 + ) : (
  448 + <span className="ant-upload-list-item-actions">
349 449 <a
350   - className="ant-upload-list-item-thumbnail ant-upload-list-item-file"
  450 + target="_blank"
  451 + rel="noopener noreferrer"
  452 + title="预览文件"
351 453 href={
352 454 file?.status === "error"
353 455 ? undefined
354 456 : IMGURL.showImage(file?.response?.data)
355 457 }
356   - target="_blank"
357   - rel="noopener noreferrer"
358   - type={file?.type}
359   - download={file?.name}
  458 + style={{ display: file?.status === "error" ? "none" : undefined }}
360 459 >
361   - {file?.type?.includes("image") ? (
362   - <img
363   - src={IMGURL.showImage(file?.thumbUrl || file?.response?.data)}
364   - alt={`${file?.name}(${
365   - file?.size ? getFileSize(file?.size) : ""
366   - })`}
367   - className="ant-upload-list-item-image"
368   - />
369   - ) : (
370   - <FileTwoTone style={{ fontSize: 26 }} />
371   - )}
  460 + <EyeOutlined />
372 461 </a>
373   - <span
374   - className="ant-upload-list-item-name"
375   - style={{
376   - display: file?.type?.includes("image") ? "none" : undefined,
377   - }}
378   - title={`${file?.name}(${
379   - file?.size ? getFileSize(file?.size) : ""
380   - })`}
  462 + <button
  463 + title="删除文件"
  464 + type="button"
  465 + onClick={() => remove()}
  466 + className="ant-btn ant-btn-text ant-btn-sm ant-btn-icon-only ant-upload-list-item-card-actions-btn"
381 467 >
382   - {file?.name}({file?.size ? getFileSize(file?.size) : ""})
383   - </span>
  468 + <DeleteOutlined />
  469 + </button>
384 470 </span>
385   - </div>
386   - <span className="ant-upload-list-item-actions">
387   - <a
388   - target="_blank"
389   - rel="noopener noreferrer"
390   - title="预览文件"
391   - href={
392   - file?.status === "error"
393   - ? undefined
394   - : IMGURL.showImage(file?.response?.data)
395   - }
396   - style={{ display: file?.status === "error" ? "none" : undefined }}
397   - >
398   - <EyeOutlined />
399   - </a>
400   - <button
401   - title="删除文件"
402   - type="button"
403   - onClick={() => remove()}
404   - className="ant-btn ant-btn-text ant-btn-sm ant-btn-icon-only ant-upload-list-item-card-actions-btn"
405   - >
406   - <DeleteOutlined />
407   - </button>
408   - </span>
  471 + )}
409 472 </div>
410 473 </Popover>
411 474 </div>
... ... @@ -431,64 +494,107 @@ const ListTypeOfPicture = ({
431 494 <div
432 495 className={`ant-upload-list-item ant-upload-list-item-done ${
433 496 file?.status === "error" ? "ant-upload-list-item-error" : ""
  497 + } ${
  498 + file?.status === "uploading" ? "ant-upload-list-item-uploading" : ""
434 499 } ant-upload-list-item-list-type-picture`}
435 500 >
436 501 <div className="ant-upload-list-item-info">
437   - <span className="ant-upload-span">
438   - <a
439   - className="ant-upload-list-item-thumbnail"
440   - href={
441   - file?.status === "error"
442   - ? undefined
443   - : IMGURL.showImage(file?.response?.data)
444   - }
445   - target="_blank"
446   - rel="noopener noreferrer"
447   - >
448   - {file?.type?.includes("image") ? (
449   - <img
450   - src={IMGURL.showImage(file?.thumbUrl || file?.response?.data)}
451   - alt={`${file?.name}(${
452   - file?.size ? getFileSize(file?.size) : ""
453   - })`}
454   - className="ant-upload-list-item-image"
455   - />
456   - ) : (
457   - <FileTwoTone style={{ fontSize: 26 }} />
458   - )}
459   - </a>
460   - <a
461   - target="_blank"
462   - rel="noopener noreferrer"
463   - className="ant-upload-list-item-name"
464   - title={`${file?.name}(${
465   - file?.size ? getFileSize(file?.size) : ""
466   - })`}
467   - href={
468   - file?.status === "error"
469   - ? undefined
470   - : IMGURL.showImage(file?.response?.data)
471   - }
472   - >
473   - {file?.name}({file?.size ? getFileSize(file?.size) : ""})
474   - </a>
475   - {/* @ts-ignore */}
476   - {file?.status === "error" && file?.errMsg ? (
477   - // @ts-ignore
478   - <span>{file?.errMsg}</span>
479   - ) : null}
480   - <span className="ant-upload-list-item-card-actions picture">
481   - <button
482   - title="删除文件"
483   - type="button"
484   - onClick={() => remove()}
485   - className="ant-btn ant-btn-text ant-btn-sm ant-btn-icon-only ant-upload-list-item-card-actions-btn"
  502 + {file?.status === "uploading" ? (
  503 + <span className="ant-upload-span">
  504 + <div className="ant-upload-list-item-thumbnail">
  505 + <LoadingOutlined />
  506 + </div>
  507 + <span
  508 + className="ant-upload-list-item-name"
  509 + title={`${file?.name}(${
  510 + file?.size ? getFileSize(file?.size) : ""
  511 + })`}
486 512 >
487   - <DeleteOutlined />
488   - </button>
  513 + {file?.name}({file?.size ? getFileSize(file?.size) : ""})
  514 + </span>
  515 + <span className="ant-upload-list-item-card-actions picture">
  516 + <button
  517 + title="删除文件"
  518 + type="button"
  519 + onClick={() => remove()}
  520 + className="ant-btn ant-btn-text ant-btn-sm ant-btn-icon-only ant-upload-list-item-card-actions-btn"
  521 + >
  522 + <DeleteOutlined />
  523 + </button>
  524 + </span>
  525 + </span>
  526 + ) : (
  527 + <span className="ant-upload-span">
  528 + <a
  529 + className="ant-upload-list-item-thumbnail"
  530 + href={
  531 + file?.status === "error"
  532 + ? undefined
  533 + : IMGURL.showImage(file?.response?.data)
  534 + }
  535 + target="_blank"
  536 + rel="noopener noreferrer"
  537 + >
  538 + {file?.type?.includes("image") ? (
  539 + <img
  540 + src={IMGURL.showImage(file?.thumbUrl || file?.response?.data)}
  541 + alt={`${file?.name}(${
  542 + file?.size ? getFileSize(file?.size) : ""
  543 + })`}
  544 + className="ant-upload-list-item-image"
  545 + />
  546 + ) : (
  547 + <FileTwoTone style={{ fontSize: 26 }} />
  548 + )}
  549 + </a>
  550 + <a
  551 + target="_blank"
  552 + rel="noopener noreferrer"
  553 + className="ant-upload-list-item-name"
  554 + title={`${file?.name}(${
  555 + file?.size ? getFileSize(file?.size) : ""
  556 + })`}
  557 + href={
  558 + file?.status === "error"
  559 + ? undefined
  560 + : IMGURL.showImage(file?.response?.data)
  561 + }
  562 + >
  563 + {file?.name}({file?.size ? getFileSize(file?.size) : ""})
  564 + </a>
  565 + {/* @ts-ignore */}
  566 + {file?.status === "error" && file?.errMsg ? (
  567 + // @ts-ignore
  568 + <span>{file?.errMsg}</span>
  569 + ) : null}
  570 + <span className="ant-upload-list-item-card-actions picture">
  571 + <button
  572 + title="删除文件"
  573 + type="button"
  574 + onClick={() => remove()}
  575 + className="ant-btn ant-btn-text ant-btn-sm ant-btn-icon-only ant-upload-list-item-card-actions-btn"
  576 + >
  577 + <DeleteOutlined />
  578 + </button>
  579 + </span>
489 580 </span>
490   - </span>
  581 + )}
491 582 </div>
  583 +
  584 + {file?.status === "uploading" ? (
  585 + <div className="ant-upload-list-item-progress">
  586 + <div className="ant-progress ant-progress-line ant-progress-status-normal ant-progress-default">
  587 + <div className="ant-progress-outer">
  588 + <div className="ant-progress-inner">
  589 + <div
  590 + className="ant-progress-bg"
  591 + style={{ width: `${file?.percent || 0}%`, height: 2 }}
  592 + />
  593 + </div>
  594 + </div>
  595 + </div>
  596 + </div>
  597 + ) : null}
492 598 </div>
493 599 </div>
494 600 );
... ...