use-handlers.mjs 4.0 KB

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