use-handlers.mjs 4.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135
  1. import { watch } from 'vue';
  2. import { isNil } from 'lodash-unified';
  3. import { useVModel } from '@vueuse/core';
  4. import '../../../utils/index.mjs';
  5. import { genFileId } from './upload.mjs';
  6. import { debugWarn, throwError } from '../../../utils/error.mjs';
  7. const SCOPE = "ElUpload";
  8. const revokeObjectURL = (file) => {
  9. var _a;
  10. if ((_a = file.url) == null ? void 0 : _a.startsWith("blob:")) {
  11. URL.revokeObjectURL(file.url);
  12. }
  13. };
  14. const useHandlers = (props, uploadRef) => {
  15. const uploadFiles = useVModel(props, "fileList", void 0, { passive: true });
  16. const getFile = (rawFile) => uploadFiles.value.find((file) => file.uid === rawFile.uid);
  17. function abort(file) {
  18. var _a;
  19. (_a = uploadRef.value) == null ? void 0 : _a.abort(file);
  20. }
  21. function clearFiles(states = ["ready", "uploading", "success", "fail"]) {
  22. uploadFiles.value = uploadFiles.value.filter((row) => !states.includes(row.status));
  23. }
  24. const handleError = (err, rawFile) => {
  25. const file = getFile(rawFile);
  26. if (!file)
  27. return;
  28. console.error(err);
  29. file.status = "fail";
  30. uploadFiles.value.splice(uploadFiles.value.indexOf(file), 1);
  31. props.onError(err, file, uploadFiles.value);
  32. props.onChange(file, uploadFiles.value);
  33. };
  34. const handleProgress = (evt, rawFile) => {
  35. const file = getFile(rawFile);
  36. if (!file)
  37. return;
  38. props.onProgress(evt, file, uploadFiles.value);
  39. file.status = "uploading";
  40. file.percentage = Math.round(evt.percent);
  41. };
  42. const handleSuccess = (response, rawFile) => {
  43. const file = getFile(rawFile);
  44. if (!file)
  45. return;
  46. file.status = "success";
  47. file.response = response;
  48. props.onSuccess(response, file, uploadFiles.value);
  49. props.onChange(file, uploadFiles.value);
  50. };
  51. const handleStart = (file) => {
  52. if (isNil(file.uid))
  53. file.uid = genFileId();
  54. const uploadFile = {
  55. name: file.name,
  56. percentage: 0,
  57. status: "ready",
  58. size: file.size,
  59. raw: file,
  60. uid: file.uid
  61. };
  62. if (props.listType === "picture-card" || props.listType === "picture") {
  63. try {
  64. uploadFile.url = URL.createObjectURL(file);
  65. } catch (err) {
  66. debugWarn(SCOPE, err.message);
  67. props.onError(err, uploadFile, uploadFiles.value);
  68. }
  69. }
  70. uploadFiles.value = [...uploadFiles.value, uploadFile];
  71. props.onChange(uploadFile, uploadFiles.value);
  72. };
  73. const handleRemove = async (file) => {
  74. const uploadFile = file instanceof File ? getFile(file) : file;
  75. if (!uploadFile)
  76. throwError(SCOPE, "file to be removed not found");
  77. const doRemove = (file2) => {
  78. abort(file2);
  79. const fileList = uploadFiles.value;
  80. fileList.splice(fileList.indexOf(file2), 1);
  81. props.onRemove(file2, fileList);
  82. revokeObjectURL(file2);
  83. };
  84. if (props.beforeRemove) {
  85. const before = await props.beforeRemove(uploadFile, uploadFiles.value);
  86. if (before !== false)
  87. doRemove(uploadFile);
  88. } else {
  89. doRemove(uploadFile);
  90. }
  91. };
  92. function submit() {
  93. uploadFiles.value.filter(({ status }) => status === "ready").forEach(({ raw }) => {
  94. var _a;
  95. return raw && ((_a = uploadRef.value) == null ? void 0 : _a.upload(raw));
  96. });
  97. }
  98. watch(() => props.listType, (val) => {
  99. if (val !== "picture-card" && val !== "picture") {
  100. return;
  101. }
  102. uploadFiles.value = uploadFiles.value.map((file) => {
  103. const { raw, url } = file;
  104. if (!url && raw) {
  105. try {
  106. file.url = URL.createObjectURL(raw);
  107. } catch (err) {
  108. props.onError(err, file, uploadFiles.value);
  109. }
  110. }
  111. return file;
  112. });
  113. });
  114. watch(uploadFiles, (files) => {
  115. for (const file of files) {
  116. file.uid || (file.uid = genFileId());
  117. file.status || (file.status = "success");
  118. }
  119. }, { immediate: true, deep: true });
  120. return {
  121. uploadFiles,
  122. abort,
  123. clearFiles,
  124. handleError,
  125. handleProgress,
  126. handleStart,
  127. handleSuccess,
  128. handleRemove,
  129. submit
  130. };
  131. };
  132. export { useHandlers };
  133. //# sourceMappingURL=use-handlers.mjs.map