upload-content2.js 6.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205
  1. 'use strict';
  2. Object.defineProperty(exports, '__esModule', { value: true });
  3. var vue = require('vue');
  4. var lodashUnified = require('lodash-unified');
  5. var uploadDragger = require('./upload-dragger.js');
  6. var uploadContent = require('./upload-content.js');
  7. var upload = require('./upload.js');
  8. var pluginVue_exportHelper = require('../../../_virtual/plugin-vue_export-helper.js');
  9. var objects = require('../../../utils/objects.js');
  10. var index = require('../../../hooks/use-namespace/index.js');
  11. var useFormCommonProps = require('../../form/src/hooks/use-form-common-props.js');
  12. var shared = require('@vue/shared');
  13. const __default__ = vue.defineComponent({
  14. name: "ElUploadContent",
  15. inheritAttrs: false
  16. });
  17. const _sfc_main = /* @__PURE__ */ vue.defineComponent({
  18. ...__default__,
  19. props: uploadContent.uploadContentProps,
  20. setup(__props, { expose }) {
  21. const props = __props;
  22. const ns = index.useNamespace("upload");
  23. const disabled = useFormCommonProps.useFormDisabled();
  24. const requests = vue.shallowRef({});
  25. const inputRef = vue.shallowRef();
  26. const uploadFiles = (files) => {
  27. if (files.length === 0)
  28. return;
  29. const { autoUpload, limit, fileList, multiple, onStart, onExceed } = props;
  30. if (limit && fileList.length + files.length > limit) {
  31. onExceed(files, fileList);
  32. return;
  33. }
  34. if (!multiple) {
  35. files = files.slice(0, 1);
  36. }
  37. for (const file of files) {
  38. const rawFile = file;
  39. rawFile.uid = upload.genFileId();
  40. onStart(rawFile);
  41. if (autoUpload)
  42. upload$1(rawFile);
  43. }
  44. };
  45. const upload$1 = async (rawFile) => {
  46. inputRef.value.value = "";
  47. if (!props.beforeUpload) {
  48. return doUpload(rawFile);
  49. }
  50. let hookResult;
  51. let beforeData = {};
  52. try {
  53. const originData = props.data;
  54. const beforeUploadPromise = props.beforeUpload(rawFile);
  55. beforeData = shared.isPlainObject(props.data) ? lodashUnified.cloneDeep(props.data) : props.data;
  56. hookResult = await beforeUploadPromise;
  57. if (shared.isPlainObject(props.data) && lodashUnified.isEqual(originData, beforeData)) {
  58. beforeData = lodashUnified.cloneDeep(props.data);
  59. }
  60. } catch (e) {
  61. hookResult = false;
  62. }
  63. if (hookResult === false) {
  64. props.onRemove(rawFile);
  65. return;
  66. }
  67. let file = rawFile;
  68. if (hookResult instanceof Blob) {
  69. if (hookResult instanceof File) {
  70. file = hookResult;
  71. } else {
  72. file = new File([hookResult], rawFile.name, {
  73. type: rawFile.type
  74. });
  75. }
  76. }
  77. doUpload(Object.assign(file, {
  78. uid: rawFile.uid
  79. }), beforeData);
  80. };
  81. const resolveData = async (data, rawFile) => {
  82. if (shared.isFunction(data)) {
  83. return data(rawFile);
  84. }
  85. return data;
  86. };
  87. const doUpload = async (rawFile, beforeData) => {
  88. const {
  89. headers,
  90. data,
  91. method,
  92. withCredentials,
  93. name: filename,
  94. action,
  95. onProgress,
  96. onSuccess,
  97. onError,
  98. httpRequest
  99. } = props;
  100. try {
  101. beforeData = await resolveData(beforeData != null ? beforeData : data, rawFile);
  102. } catch (e) {
  103. props.onRemove(rawFile);
  104. return;
  105. }
  106. const { uid } = rawFile;
  107. const options = {
  108. headers: headers || {},
  109. withCredentials,
  110. file: rawFile,
  111. data: beforeData,
  112. method,
  113. filename,
  114. action,
  115. onProgress: (evt) => {
  116. onProgress(evt, rawFile);
  117. },
  118. onSuccess: (res) => {
  119. onSuccess(res, rawFile);
  120. delete requests.value[uid];
  121. },
  122. onError: (err) => {
  123. onError(err, rawFile);
  124. delete requests.value[uid];
  125. }
  126. };
  127. const request = httpRequest(options);
  128. requests.value[uid] = request;
  129. if (request instanceof Promise) {
  130. request.then(options.onSuccess, options.onError);
  131. }
  132. };
  133. const handleChange = (e) => {
  134. const files = e.target.files;
  135. if (!files)
  136. return;
  137. uploadFiles(Array.from(files));
  138. };
  139. const handleClick = () => {
  140. if (!disabled.value) {
  141. inputRef.value.value = "";
  142. inputRef.value.click();
  143. }
  144. };
  145. const handleKeydown = () => {
  146. handleClick();
  147. };
  148. const abort = (file) => {
  149. const _reqs = objects.entriesOf(requests.value).filter(file ? ([uid]) => String(file.uid) === uid : () => true);
  150. _reqs.forEach(([uid, req]) => {
  151. if (req instanceof XMLHttpRequest)
  152. req.abort();
  153. delete requests.value[uid];
  154. });
  155. };
  156. expose({
  157. abort,
  158. upload: upload$1
  159. });
  160. return (_ctx, _cache) => {
  161. return vue.openBlock(), vue.createElementBlock("div", {
  162. class: vue.normalizeClass([
  163. vue.unref(ns).b(),
  164. vue.unref(ns).m(_ctx.listType),
  165. vue.unref(ns).is("drag", _ctx.drag),
  166. vue.unref(ns).is("disabled", vue.unref(disabled))
  167. ]),
  168. tabindex: vue.unref(disabled) ? "-1" : "0",
  169. onClick: handleClick,
  170. onKeydown: vue.withKeys(vue.withModifiers(handleKeydown, ["self"]), ["enter", "space"])
  171. }, [
  172. _ctx.drag ? (vue.openBlock(), vue.createBlock(uploadDragger["default"], {
  173. key: 0,
  174. disabled: vue.unref(disabled),
  175. onFile: uploadFiles
  176. }, {
  177. default: vue.withCtx(() => [
  178. vue.renderSlot(_ctx.$slots, "default")
  179. ]),
  180. _: 3
  181. }, 8, ["disabled"])) : vue.renderSlot(_ctx.$slots, "default", { key: 1 }),
  182. vue.createElementVNode("input", {
  183. ref_key: "inputRef",
  184. ref: inputRef,
  185. class: vue.normalizeClass(vue.unref(ns).e("input")),
  186. name: _ctx.name,
  187. disabled: vue.unref(disabled),
  188. multiple: _ctx.multiple,
  189. accept: _ctx.accept,
  190. type: "file",
  191. onChange: handleChange,
  192. onClick: vue.withModifiers(() => {
  193. }, ["stop"])
  194. }, null, 42, ["name", "disabled", "multiple", "accept", "onClick"])
  195. ], 42, ["tabindex", "onKeydown"]);
  196. };
  197. }
  198. });
  199. var UploadContent = /* @__PURE__ */ pluginVue_exportHelper["default"](_sfc_main, [["__file", "upload-content.vue"]]);
  200. exports["default"] = UploadContent;
  201. //# sourceMappingURL=upload-content2.js.map