utils.js 3.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123
  1. import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
  2. export function file2Obj(file) {
  3. return Object.assign(Object.assign({}, file), {
  4. lastModified: file.lastModified,
  5. lastModifiedDate: file.lastModifiedDate,
  6. name: file.name,
  7. size: file.size,
  8. type: file.type,
  9. uid: file.uid,
  10. percent: 0,
  11. originFileObj: file
  12. });
  13. }
  14. /** Upload fileList. Replace file if exist or just push into it. */
  15. export function updateFileList(file, fileList) {
  16. const nextFileList = _toConsumableArray(fileList);
  17. const fileIndex = nextFileList.findIndex(({
  18. uid
  19. }) => uid === file.uid);
  20. if (fileIndex === -1) {
  21. nextFileList.push(file);
  22. } else {
  23. nextFileList[fileIndex] = file;
  24. }
  25. return nextFileList;
  26. }
  27. export function getFileItem(file, fileList) {
  28. const matchKey = file.uid !== undefined ? 'uid' : 'name';
  29. return fileList.filter(item => item[matchKey] === file[matchKey])[0];
  30. }
  31. export function removeFileItem(file, fileList) {
  32. const matchKey = file.uid !== undefined ? 'uid' : 'name';
  33. const removed = fileList.filter(item => item[matchKey] !== file[matchKey]);
  34. if (removed.length === fileList.length) {
  35. return null;
  36. }
  37. return removed;
  38. }
  39. // ==================== Default Image Preview ====================
  40. const extname = (url = '') => {
  41. const temp = url.split('/');
  42. const filename = temp[temp.length - 1];
  43. const filenameWithoutSuffix = filename.split(/#|\?/)[0];
  44. return (/\.[^./\\]*$/.exec(filenameWithoutSuffix) || [''])[0];
  45. };
  46. const isImageFileType = type => type.indexOf('image/') === 0;
  47. export const isImageUrl = file => {
  48. if (file.type && !file.thumbUrl) {
  49. return isImageFileType(file.type);
  50. }
  51. const url = file.thumbUrl || file.url || '';
  52. const extension = extname(url);
  53. if (/^data:image\//.test(url) || /(webp|svg|png|gif|jpg|jpeg|jfif|bmp|dpg|ico|heic|heif)$/i.test(extension)) {
  54. return true;
  55. }
  56. if (/^data:/.test(url)) {
  57. // other file types of base64
  58. return false;
  59. }
  60. if (extension) {
  61. // other file types which have extension
  62. return false;
  63. }
  64. return true;
  65. };
  66. const MEASURE_SIZE = 200;
  67. export function previewImage(file) {
  68. return new Promise(resolve => {
  69. if (!file.type || !isImageFileType(file.type)) {
  70. resolve('');
  71. return;
  72. }
  73. const canvas = document.createElement('canvas');
  74. canvas.width = MEASURE_SIZE;
  75. canvas.height = MEASURE_SIZE;
  76. canvas.style.cssText = `position: fixed; left: 0; top: 0; width: ${MEASURE_SIZE}px; height: ${MEASURE_SIZE}px; z-index: 9999; display: none;`;
  77. document.body.appendChild(canvas);
  78. const ctx = canvas.getContext('2d');
  79. const img = new Image();
  80. img.onload = () => {
  81. const {
  82. width,
  83. height
  84. } = img;
  85. let drawWidth = MEASURE_SIZE;
  86. let drawHeight = MEASURE_SIZE;
  87. let offsetX = 0;
  88. let offsetY = 0;
  89. if (width > height) {
  90. drawHeight = height * (MEASURE_SIZE / width);
  91. offsetY = -(drawHeight - drawWidth) / 2;
  92. } else {
  93. drawWidth = width * (MEASURE_SIZE / height);
  94. offsetX = -(drawWidth - drawHeight) / 2;
  95. }
  96. ctx.drawImage(img, offsetX, offsetY, drawWidth, drawHeight);
  97. const dataURL = canvas.toDataURL();
  98. document.body.removeChild(canvas);
  99. window.URL.revokeObjectURL(img.src);
  100. resolve(dataURL);
  101. };
  102. img.crossOrigin = 'anonymous';
  103. if (file.type.startsWith('image/svg+xml')) {
  104. const reader = new FileReader();
  105. reader.onload = () => {
  106. if (reader.result && typeof reader.result === 'string') {
  107. img.src = reader.result;
  108. }
  109. };
  110. reader.readAsDataURL(file);
  111. } else if (file.type.startsWith('image/gif')) {
  112. const reader = new FileReader();
  113. reader.onload = () => {
  114. if (reader.result) {
  115. resolve(reader.result);
  116. }
  117. };
  118. reader.readAsDataURL(file);
  119. } else {
  120. img.src = window.URL.createObjectURL(file);
  121. }
  122. });
  123. }