1 | import { isVNode as _isVNode, createVNode as _createVNode } from "vue";
|
2 |
|
3 | function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
|
4 |
|
5 | function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
|
6 |
|
7 | function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
|
8 |
|
9 | function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
|
10 |
|
11 | import classNames from '../_util/classNames';
|
12 | import uniqBy from 'lodash-es/uniqBy';
|
13 | import findIndex from 'lodash-es/findIndex';
|
14 | import VcUpload from '../vc-upload';
|
15 | import BaseMixin from '../_util/BaseMixin';
|
16 | import { getOptionProps, hasProp, getSlot } from '../_util/props-util';
|
17 | import initDefaultProps from '../_util/props-util/initDefaultProps';
|
18 | import LocaleReceiver from '../locale-provider/LocaleReceiver';
|
19 | import defaultLocale from '../locale-provider/default';
|
20 | import { defaultConfigProvider } from '../config-provider';
|
21 | import Dragger from './Dragger';
|
22 | import UploadList from './UploadList';
|
23 | import { UploadProps } from './interface';
|
24 | import { T, fileToObject, genPercentAdd, getFileItem, removeFileItem } from './utils';
|
25 | import { defineComponent, inject } from 'vue';
|
26 | import { getDataAndAria } from '../vc-tree/src/util';
|
27 |
|
28 | function _isSlot(s) {
|
29 | return typeof s === 'function' || Object.prototype.toString.call(s) === '[object Object]' && !_isVNode(s);
|
30 | }
|
31 |
|
32 | export default defineComponent({
|
33 | name: 'AUpload',
|
34 | mixins: [BaseMixin],
|
35 | inheritAttrs: false,
|
36 | Dragger: Dragger,
|
37 | props: initDefaultProps(UploadProps, {
|
38 | type: 'select',
|
39 | multiple: false,
|
40 | action: '',
|
41 | data: {},
|
42 | accept: '',
|
43 | beforeUpload: T,
|
44 | showUploadList: true,
|
45 | listType: 'text',
|
46 | disabled: false,
|
47 | supportServerRender: true
|
48 | }),
|
49 | setup: function setup() {
|
50 | return {
|
51 | upload: null,
|
52 | progressTimer: null,
|
53 | configProvider: inject('configProvider', defaultConfigProvider)
|
54 | };
|
55 | },
|
56 |
|
57 | data: function data() {
|
58 | return {
|
59 | sFileList: this.fileList || this.defaultFileList || [],
|
60 | dragState: 'drop'
|
61 | };
|
62 | },
|
63 | watch: {
|
64 | fileList: function fileList(val) {
|
65 | this.sFileList = val || [];
|
66 | }
|
67 | },
|
68 | beforeUnmount: function beforeUnmount() {
|
69 | this.clearProgressTimer();
|
70 | },
|
71 | methods: {
|
72 | onStart: function onStart(file) {
|
73 | var targetItem = fileToObject(file);
|
74 | targetItem.status = 'uploading';
|
75 | var nextFileList = this.sFileList.concat();
|
76 | var fileIndex = findIndex(nextFileList, function (_ref) {
|
77 | var uid = _ref.uid;
|
78 | return uid === targetItem.uid;
|
79 | });
|
80 |
|
81 | if (fileIndex === -1) {
|
82 | nextFileList.push(targetItem);
|
83 | } else {
|
84 | nextFileList[fileIndex] = targetItem;
|
85 | }
|
86 |
|
87 | this.handleChange({
|
88 | file: targetItem,
|
89 | fileList: nextFileList
|
90 | });
|
91 |
|
92 | if (!window.File || process.env.TEST_IE) {
|
93 | this.autoUpdateProgress(0, targetItem);
|
94 | }
|
95 | },
|
96 | onSuccess: function onSuccess(response, file, xhr) {
|
97 | this.clearProgressTimer();
|
98 |
|
99 | try {
|
100 | if (typeof response === 'string') {
|
101 | response = JSON.parse(response);
|
102 | }
|
103 | } catch (e) {
|
104 |
|
105 | }
|
106 |
|
107 | var fileList = this.sFileList;
|
108 | var targetItem = getFileItem(file, fileList);
|
109 |
|
110 | if (!targetItem) {
|
111 | return;
|
112 | }
|
113 |
|
114 | targetItem.status = 'done';
|
115 | targetItem.response = response;
|
116 | targetItem.xhr = xhr;
|
117 | this.handleChange({
|
118 | file: _extends({}, targetItem),
|
119 | fileList: fileList
|
120 | });
|
121 | },
|
122 | onProgress: function onProgress(e, file) {
|
123 | var fileList = this.sFileList;
|
124 | var targetItem = getFileItem(file, fileList);
|
125 |
|
126 | if (!targetItem) {
|
127 | return;
|
128 | }
|
129 |
|
130 | targetItem.percent = e.percent;
|
131 | this.handleChange({
|
132 | event: e,
|
133 | file: _extends({}, targetItem),
|
134 | fileList: this.sFileList
|
135 | });
|
136 | },
|
137 | onError: function onError(error, response, file) {
|
138 | this.clearProgressTimer();
|
139 | var fileList = this.sFileList;
|
140 | var targetItem = getFileItem(file, fileList);
|
141 |
|
142 | if (!targetItem) {
|
143 | return;
|
144 | }
|
145 |
|
146 | targetItem.error = error;
|
147 | targetItem.response = response;
|
148 | targetItem.status = 'error';
|
149 | this.handleChange({
|
150 | file: _extends({}, targetItem),
|
151 | fileList: fileList
|
152 | });
|
153 | },
|
154 | onReject: function onReject(fileList) {
|
155 | this.$emit('reject', fileList);
|
156 | },
|
157 | handleRemove: function handleRemove(file) {
|
158 | var _this = this;
|
159 |
|
160 | var onRemove = this.remove;
|
161 | var fileList = this.$data.sFileList;
|
162 | Promise.resolve(typeof onRemove === 'function' ? onRemove(file) : onRemove).then(function (ret) {
|
163 |
|
164 | if (ret === false) {
|
165 | return;
|
166 | }
|
167 |
|
168 | var removedFileList = removeFileItem(file, fileList);
|
169 |
|
170 | if (removedFileList) {
|
171 | file.status = 'removed';
|
172 |
|
173 | if (_this.upload) {
|
174 | _this.upload.abort(file);
|
175 | }
|
176 |
|
177 | _this.handleChange({
|
178 | file: file,
|
179 | fileList: removedFileList
|
180 | });
|
181 | }
|
182 | });
|
183 | },
|
184 | handleManualRemove: function handleManualRemove(file) {
|
185 | if (this.$refs.uploadRef) {
|
186 | this.$refs.uploadRef.abort(file);
|
187 | }
|
188 |
|
189 | this.handleRemove(file);
|
190 | },
|
191 | handleChange: function handleChange(info) {
|
192 | if (!hasProp(this, 'fileList')) {
|
193 | this.setState({
|
194 | sFileList: info.fileList
|
195 | });
|
196 | }
|
197 |
|
198 | this.$emit('update:fileList', info.fileList);
|
199 | this.$emit('change', info);
|
200 | },
|
201 | onFileDrop: function onFileDrop(e) {
|
202 | this.setState({
|
203 | dragState: e.type
|
204 | });
|
205 | },
|
206 | reBeforeUpload: function reBeforeUpload(file, fileList) {
|
207 | var beforeUpload = this.$props.beforeUpload;
|
208 | var stateFileList = this.$data.sFileList;
|
209 |
|
210 | if (!beforeUpload) {
|
211 | return true;
|
212 | }
|
213 |
|
214 | var result = beforeUpload(file, fileList);
|
215 |
|
216 | if (result === false) {
|
217 | this.handleChange({
|
218 | file: file,
|
219 | fileList: uniqBy(stateFileList.concat(fileList.map(fileToObject)), function (item) {
|
220 | return item.uid;
|
221 | })
|
222 | });
|
223 | return false;
|
224 | }
|
225 |
|
226 | if (result && result.then) {
|
227 | return result;
|
228 | }
|
229 |
|
230 | return true;
|
231 | },
|
232 | clearProgressTimer: function clearProgressTimer() {
|
233 | clearInterval(this.progressTimer);
|
234 | },
|
235 | autoUpdateProgress: function autoUpdateProgress(_, file) {
|
236 | var _this2 = this;
|
237 |
|
238 | var getPercent = genPercentAdd();
|
239 | var curPercent = 0;
|
240 | this.clearProgressTimer();
|
241 | this.progressTimer = setInterval(function () {
|
242 | curPercent = getPercent(curPercent);
|
243 |
|
244 | _this2.onProgress({
|
245 | percent: curPercent * 100
|
246 | }, file);
|
247 | }, 200);
|
248 | },
|
249 | renderUploadList: function renderUploadList(locale) {
|
250 | var _getOptionProps = getOptionProps(this),
|
251 | _getOptionProps$showU = _getOptionProps.showUploadList,
|
252 | showUploadList = _getOptionProps$showU === void 0 ? {} : _getOptionProps$showU,
|
253 | listType = _getOptionProps.listType,
|
254 | previewFile = _getOptionProps.previewFile,
|
255 | disabled = _getOptionProps.disabled,
|
256 | propLocale = _getOptionProps.locale;
|
257 |
|
258 | var showRemoveIcon = showUploadList.showRemoveIcon,
|
259 | showPreviewIcon = showUploadList.showPreviewIcon,
|
260 | showDownloadIcon = showUploadList.showDownloadIcon;
|
261 | var fileList = this.$data.sFileList;
|
262 | var _this$$props = this.$props,
|
263 | onDownload = _this$$props.onDownload,
|
264 | onPreview = _this$$props.onPreview;
|
265 | var uploadListProps = {
|
266 | listType: listType,
|
267 | items: fileList,
|
268 | previewFile: previewFile,
|
269 | showRemoveIcon: !disabled && showRemoveIcon,
|
270 | showPreviewIcon: showPreviewIcon,
|
271 | showDownloadIcon: showDownloadIcon,
|
272 | locale: _extends(_extends({}, locale), propLocale),
|
273 | onRemove: this.handleManualRemove,
|
274 | onDownload: onDownload,
|
275 | onPreview: onPreview
|
276 | };
|
277 | return _createVNode(UploadList, uploadListProps, null);
|
278 | }
|
279 | },
|
280 | render: function render() {
|
281 | var _classNames2;
|
282 |
|
283 | var _getOptionProps2 = getOptionProps(this),
|
284 | customizePrefixCls = _getOptionProps2.prefixCls,
|
285 | showUploadList = _getOptionProps2.showUploadList,
|
286 | listType = _getOptionProps2.listType,
|
287 | type = _getOptionProps2.type,
|
288 | disabled = _getOptionProps2.disabled;
|
289 |
|
290 | var _this$$data = this.$data,
|
291 | fileList = _this$$data.sFileList,
|
292 | dragState = _this$$data.dragState;
|
293 | var _this$$attrs = this.$attrs,
|
294 | className = _this$$attrs.class,
|
295 | style = _this$$attrs.style;
|
296 | var getPrefixCls = this.configProvider.getPrefixCls;
|
297 | var prefixCls = getPrefixCls('upload', customizePrefixCls);
|
298 |
|
299 | var vcUploadProps = _extends(_extends({}, this.$props), {
|
300 | prefixCls: prefixCls,
|
301 | beforeUpload: this.reBeforeUpload,
|
302 | onStart: this.onStart,
|
303 | onError: this.onError,
|
304 | onProgress: this.onProgress,
|
305 | onSuccess: this.onSuccess,
|
306 | onReject: this.onReject,
|
307 | ref: 'uploadRef'
|
308 | });
|
309 |
|
310 | var uploadList = showUploadList ? _createVNode(LocaleReceiver, {
|
311 | "componentName": "Upload",
|
312 | "defaultLocale": defaultLocale.Upload,
|
313 | "children": this.renderUploadList
|
314 | }, null) : null;
|
315 | var children = getSlot(this);
|
316 |
|
317 | if (type === 'drag') {
|
318 | var _slot;
|
319 |
|
320 | var _classNames;
|
321 |
|
322 | var dragCls = classNames(prefixCls, (_classNames = {}, _defineProperty(_classNames, "".concat(prefixCls, "-drag"), true), _defineProperty(_classNames, "".concat(prefixCls, "-drag-uploading"), fileList.some(function (file) {
|
323 | return file.status === 'uploading';
|
324 | })), _defineProperty(_classNames, "".concat(prefixCls, "-drag-hover"), dragState === 'dragover'), _defineProperty(_classNames, "".concat(prefixCls, "-disabled"), disabled), _classNames));
|
325 | return _createVNode("span", _objectSpread({
|
326 | "class": className
|
327 | }, getDataAndAria(this.$attrs)), [_createVNode("div", {
|
328 | "class": dragCls,
|
329 | "onDrop": this.onFileDrop,
|
330 | "onDragover": this.onFileDrop,
|
331 | "onDragleave": this.onFileDrop,
|
332 | "style": style
|
333 | }, [_createVNode(VcUpload, _objectSpread(_objectSpread({}, vcUploadProps), {}, {
|
334 | "class": "".concat(prefixCls, "-btn")
|
335 | }), _isSlot(_slot = _createVNode("div", {
|
336 | "class": "".concat(prefixCls, "-drag-container")
|
337 | }, _isSlot(children) ? children : {
|
338 | default: function _default() {
|
339 | return [children];
|
340 | }
|
341 | })) ? _slot : {
|
342 | default: function _default() {
|
343 | return [_slot];
|
344 | }
|
345 | })]), uploadList]);
|
346 | }
|
347 |
|
348 | var uploadButtonCls = classNames(prefixCls, (_classNames2 = {}, _defineProperty(_classNames2, "".concat(prefixCls, "-select"), true), _defineProperty(_classNames2, "".concat(prefixCls, "-select-").concat(listType), true), _defineProperty(_classNames2, "".concat(prefixCls, "-disabled"), disabled), _classNames2));
|
349 |
|
350 |
|
351 | if (!children.length || disabled) {
|
352 | delete vcUploadProps.id;
|
353 | }
|
354 |
|
355 | var uploadButton = _createVNode("div", {
|
356 | "class": uploadButtonCls,
|
357 | "style": children.length ? undefined : {
|
358 | display: 'none'
|
359 | }
|
360 | }, [_createVNode(VcUpload, vcUploadProps, _isSlot(children) ? children : {
|
361 | default: function _default() {
|
362 | return [children];
|
363 | }
|
364 | })]);
|
365 |
|
366 | if (listType === 'picture-card') {
|
367 | return _createVNode("span", {
|
368 | "class": classNames("".concat(prefixCls, "-picture-card-wrapper"), className)
|
369 | }, [uploadList, uploadButton]);
|
370 | }
|
371 |
|
372 | return _createVNode("span", {
|
373 | "class": className
|
374 | }, [uploadButton, uploadList]);
|
375 | }
|
376 | }); |
\ | No newline at end of file |