tdesign-mobile-vue
Version:
tdesign-mobile-vue
434 lines (430 loc) • 18.7 kB
JavaScript
/**
* tdesign v1.7.0
* (c) 2024 TDesign Group
* @license MIT
*/
import _toConsumableArray from '@babel/runtime/helpers/toConsumableArray';
import _defineProperty from '@babel/runtime/helpers/defineProperty';
import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
import { ref, toRefs, computed, h } from 'vue';
import isFunction from 'lodash/isFunction';
import isString from 'lodash/isString';
import { getDisplayFiles, formatToUploadFile, validateFile, getFilesAndErrors, upload } from '../../_common/js/upload/main.js';
import { getFileList, getFileUrlByFileRaw } from '../../_common/js/upload/utils.js';
import { useVModel } from '../../shared/useVModel/index.js';
import '@babel/runtime/helpers/toArray';
import 'lodash/isNumber';
import '../../_common/js/upload/xhr.js';
import '@babel/runtime/helpers/typeof';
import '../../_common/js/log/log.js';
import 'lodash/kebabCase';
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
function useUpload(props) {
var inputRef = ref();
var _toRefs = toRefs(props),
disabled = _toRefs.disabled,
autoUpload = _toRefs.autoUpload,
isBatchUpload = _toRefs.isBatchUpload,
multiple = _toRefs.multiple,
files = _toRefs.files,
modelValue = _toRefs.modelValue,
defaultFiles = _toRefs.defaultFiles;
var _useVModel = useVModel(files, modelValue, defaultFiles.value, props.onChange, "files"),
_useVModel2 = _slicedToArray(_useVModel, 2),
uploadValue = _useVModel2[0],
setUploadValue = _useVModel2[1];
var xhrReq = ref([]);
var toUploadFiles = ref([]);
var sizeOverLimitMessage = ref("");
var uploading = ref(false);
var displayFiles = computed(function () {
return getDisplayFiles({
multiple: (multiple === null || multiple === void 0 ? void 0 : multiple.value) || false,
toUploadFiles: toUploadFiles.value,
uploadValue: uploadValue.value,
autoUpload: (autoUpload === null || autoUpload === void 0 ? void 0 : autoUpload.value) || false,
isBatchUpload: (isBatchUpload === null || isBatchUpload === void 0 ? void 0 : isBatchUpload.value) || false
});
});
var uploadFilePercent = function uploadFilePercent(params) {
var file = params.file,
percent = params.percent;
var index = toUploadFiles.value.findIndex(function (item) {
return file.raw === item.raw;
});
toUploadFiles.value[index] = _objectSpread(_objectSpread({}, toUploadFiles.value[index]), {}, {
percent: percent
});
};
var updateFilesProgress = function updateFilesProgress() {
if (props.autoUpload) {
toUploadFiles.value = _toConsumableArray(toUploadFiles.value);
}
};
var onResponseError = function onResponseError(p) {
var _props$onOneFileFail;
if (!p || !p.files || !p.files[0]) return;
var response = p.response,
event = p.event,
files2 = p.files;
updateFilesProgress();
(_props$onOneFileFail = props.onOneFileFail) === null || _props$onOneFileFail === void 0 || _props$onOneFileFail.call(props, {
e: event,
file: files2 === null || files2 === void 0 ? void 0 : files2[0],
currentFiles: files2,
failedFiles: files2,
response: response
});
if (!props.multiple || props.isBatchUpload) {
setUploadValue([], {
trigger: "progress-fail",
e: p.event,
file: p.files[0]
});
}
};
var onResponseProgress = function onResponseProgress(p) {
var _props$onProgress;
updateFilesProgress();
(_props$onProgress = props.onProgress) === null || _props$onProgress === void 0 || _props$onProgress.call(props, {
e: p.event,
file: p.file,
currentFiles: p.files,
percent: p.percent,
type: p.type,
XMLHttpRequest: p.XMLHttpRequest
});
};
var onResponseSuccess = function onResponseSuccess(p) {
if (props.multiple && !props.uploadAllFilesInOneRequest) {
var _props$onOneFileSucce;
updateFilesProgress();
(_props$onOneFileSucce = props.onOneFileSuccess) === null || _props$onOneFileSucce === void 0 || _props$onOneFileSucce.call(props, {
e: p.event,
file: p.files[0],
response: p.response
});
}
};
var t = function t(pattern) {
for (var _len = arguments.length, args = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
args[_key - 1] = arguments[_key];
}
var data = args[0];
if (isString(pattern)) {
if (!data) return pattern;
var regular = /\{\s*([\w-]+)\s*\}/g;
var translated = pattern.replace(regular, function (match, key) {
if (data) {
return String(data[key]);
}
return "";
});
return translated;
}
if (isFunction(pattern)) {
if (!args.length) return pattern(h);
return pattern.apply(void 0, args);
}
return "";
};
function getSizeLimitError(sizeLimitObj) {
var limit = sizeLimitObj;
return limit.message ? t(limit.message, {
sizeLimit: limit.size
}) : "".concat(t("", {
sizeLimit: limit.size
}), " ").concat(limit.unit);
}
var handleNotAutoUpload = function handleNotAutoUpload(toFiles) {
var tmpFiles = props.multiple && !(isBatchUpload !== null && isBatchUpload !== void 0 && isBatchUpload.value) ? (uploadValue === null || uploadValue === void 0 ? void 0 : uploadValue.value).concat(toFiles) : toFiles;
if (!tmpFiles.length) return;
var list = tmpFiles.map(function (file) {
return new Promise(function (resolve) {
getFileUrlByFileRaw(file.raw).then(function (url) {
resolve(_objectSpread(_objectSpread({}, file), {}, {
url: file.url || url
}));
});
});
});
Promise.all(list).then(function (files2) {
setUploadValue(files2, {
trigger: "add",
index: uploadValue.value.length,
file: toFiles[0],
files: toFiles
});
});
toUploadFiles.value = [];
};
var onFileChange = function onFileChange(files2) {
var _props$onSelectChange;
if (disabled !== null && disabled !== void 0 && disabled.value) return;
var params = {
currentSelectedFiles: formatToUploadFile(_toConsumableArray(files2), props.format)
};
(_props$onSelectChange = props.onSelectChange) === null || _props$onSelectChange === void 0 || _props$onSelectChange.call(props, _toConsumableArray(files2), params);
validateFile({
uploadValue: uploadValue.value,
files: _toConsumableArray(files2),
allowUploadDuplicateFile: props.allowUploadDuplicateFile,
max: props.max,
sizeLimit: props.sizeLimit,
isBatchUpload: isBatchUpload === null || isBatchUpload === void 0 ? void 0 : isBatchUpload.value,
autoUpload: autoUpload === null || autoUpload === void 0 ? void 0 : autoUpload.value,
format: props.format,
beforeUpload: props.beforeUpload,
beforeAllFilesUpload: props.beforeAllFilesUpload
}).then(function (args) {
var _args$validateResult;
if (((_args$validateResult = args.validateResult) === null || _args$validateResult === void 0 ? void 0 : _args$validateResult.type) === "BEFORE_ALL_FILES_UPLOAD") {
var _props$onValidate;
var params2 = {
type: "BEFORE_ALL_FILES_UPLOAD",
files: args.files
};
(_props$onValidate = props.onValidate) === null || _props$onValidate === void 0 || _props$onValidate.call(props, params2);
return;
}
if (args.lengthOverLimit) {
var _props$onValidate2;
var _params = {
type: "FILES_OVER_LENGTH_LIMIT",
files: args.files
};
(_props$onValidate2 = props.onValidate) === null || _props$onValidate2 === void 0 || _props$onValidate2.call(props, _params);
if (!args.files.length) return;
}
if (args.hasSameNameFile) {
var _props$onValidate3;
var _params2 = {
type: "FILTER_FILE_SAME_NAME",
files: args.files
};
(_props$onValidate3 = props.onValidate) === null || _props$onValidate3 === void 0 || _props$onValidate3.call(props, _params2);
}
if (args.fileValidateList instanceof Array) {
var _props$onWaitingUploa;
var _getFilesAndErrors = getFilesAndErrors(args.fileValidateList, getSizeLimitError),
sizeLimitErrors = _getFilesAndErrors.sizeLimitErrors,
beforeUploadErrorFiles = _getFilesAndErrors.beforeUploadErrorFiles,
toFiles = _getFilesAndErrors.toFiles;
var tmpWaitingFiles = autoUpload !== null && autoUpload !== void 0 && autoUpload.value ? toFiles : toUploadFiles.value.concat(toFiles);
toUploadFiles.value = tmpWaitingFiles;
(_props$onWaitingUploa = props.onWaitingUploadFilesChange) === null || _props$onWaitingUploa === void 0 || _props$onWaitingUploa.call(props, {
files: tmpWaitingFiles,
trigger: "validate"
});
if (sizeLimitErrors[0]) {
var _sizeLimitErrors$, _props$onValidate4;
sizeOverLimitMessage.value = (_sizeLimitErrors$ = sizeLimitErrors[0]) === null || _sizeLimitErrors$ === void 0 || (_sizeLimitErrors$ = _sizeLimitErrors$.file) === null || _sizeLimitErrors$ === void 0 || (_sizeLimitErrors$ = _sizeLimitErrors$.response) === null || _sizeLimitErrors$ === void 0 ? void 0 : _sizeLimitErrors$.error;
(_props$onValidate4 = props.onValidate) === null || _props$onValidate4 === void 0 || _props$onValidate4.call(props, {
type: "FILE_OVER_SIZE_LIMIT",
files: sizeLimitErrors.map(function (t2) {
return t2.file;
})
});
} else {
sizeOverLimitMessage.value = "";
if (beforeUploadErrorFiles.length) {
var _props$onValidate5;
var _params3 = {
type: "CUSTOM_BEFORE_UPLOAD",
files: beforeUploadErrorFiles
};
(_props$onValidate5 = props.onValidate) === null || _props$onValidate5 === void 0 || _props$onValidate5.call(props, _params3);
}
}
if (autoUpload !== null && autoUpload !== void 0 && autoUpload.value) {
uploadFiles(tmpWaitingFiles);
} else {
handleNotAutoUpload(tmpWaitingFiles);
}
}
});
if (inputRef.value) {
inputRef.value.value = "";
}
};
var onNormalFileChange = function onNormalFileChange(e) {
var fileList = getFileList(e.target.files);
onFileChange === null || onFileChange === void 0 || onFileChange(fileList);
};
function uploadFiles(toFiles) {
var notUploadedFiles = uploadValue.value.filter(function (t2) {
return t2.status !== "success";
});
var files2 = autoUpload !== null && autoUpload !== void 0 && autoUpload.value ? toFiles || toUploadFiles.value : notUploadedFiles;
if (!files2 || !files2.length) return;
uploading.value = true;
xhrReq.value = [];
upload({
action: props.action,
headers: props.headers,
method: props.method,
name: props.name,
withCredentials: props.withCredentials,
uploadedFiles: uploadValue.value,
toUploadFiles: files2,
multiple: props.multiple,
isBatchUpload: isBatchUpload === null || isBatchUpload === void 0 ? void 0 : isBatchUpload.value,
autoUpload: props.autoUpload,
uploadAllFilesInOneRequest: props.uploadAllFilesInOneRequest,
useMockProgress: props.useMockProgress,
data: props.data,
mockProgressDuration: props.mockProgressDuration,
requestMethod: props.requestMethod,
formatRequest: props.formatRequest,
formatResponse: props.formatResponse,
onResponseProgress: onResponseProgress,
onResponseSuccess: onResponseSuccess,
onResponseError: onResponseError,
setXhrObject: function setXhrObject(xhr) {
var _xhr$files$;
if ((_xhr$files$ = xhr.files[0]) !== null && _xhr$files$ !== void 0 && _xhr$files$.raw && xhrReq.value.find(function (item) {
var _item$files$;
return ((_item$files$ = item.files[0]) === null || _item$files$ === void 0 ? void 0 : _item$files$.raw) === xhr.files[0].raw;
})) return;
xhrReq.value = xhrReq.value.concat(xhr);
}
}).then(function (_ref) {
var status = _ref.status,
data = _ref.data,
list = _ref.list,
failedFiles = _ref.failedFiles;
uploading.value = false;
if (status === "success") {
var _props$onSuccess;
if (props.autoUpload) {
setUploadValue(_toConsumableArray(data === null || data === void 0 ? void 0 : data.files), {
trigger: "add",
file: (data === null || data === void 0 ? void 0 : data.files)[0]
});
}
xhrReq.value = [];
(_props$onSuccess = props.onSuccess) === null || _props$onSuccess === void 0 || _props$onSuccess.call(props, {
fileList: data === null || data === void 0 ? void 0 : data.files,
currentFiles: files2,
file: files2[0],
results: list === null || list === void 0 ? void 0 : list.map(function (t2) {
return t2.data;
}),
response: (data === null || data === void 0 ? void 0 : data.response) || (list === null || list === void 0 ? void 0 : list.map(function (t2) {
var _t2$data;
return (_t2$data = t2.data) === null || _t2$data === void 0 ? void 0 : _t2$data.response;
})),
XMLHttpRequest: data === null || data === void 0 ? void 0 : data.XMLHttpRequest
});
} else if (failedFiles !== null && failedFiles !== void 0 && failedFiles[0]) {
var _props$onFail;
(_props$onFail = props.onFail) === null || _props$onFail === void 0 || _props$onFail.call(props, {
e: data === null || data === void 0 ? void 0 : data.event,
file: failedFiles[0],
failedFiles: failedFiles,
currentFiles: files2,
response: data === null || data === void 0 ? void 0 : data.response,
XMLHttpRequest: data === null || data === void 0 ? void 0 : data.XMLHttpRequest
});
}
if (autoUpload !== null && autoUpload !== void 0 && autoUpload.value) {
var _props$onWaitingUploa2;
toUploadFiles.value = failedFiles;
(_props$onWaitingUploa2 = props.onWaitingUploadFilesChange) === null || _props$onWaitingUploa2 === void 0 || _props$onWaitingUploa2.call(props, {
files: failedFiles,
trigger: "uploaded"
});
}
});
}
function onInnerRemove(p) {
var _p$e$stopPropagation, _p$e, _props$onRemove;
sizeOverLimitMessage.value = "";
(_p$e$stopPropagation = (_p$e = p.e).stopPropagation) === null || _p$e$stopPropagation === void 0 || _p$e$stopPropagation.call(_p$e);
var changePrams = {
e: p.e,
trigger: "remove",
index: p.index,
file: p.file
};
if (props.isBatchUpload || !props.multiple) {
var _props$onWaitingUploa3;
toUploadFiles.value = [];
(_props$onWaitingUploa3 = props.onWaitingUploadFilesChange) === null || _props$onWaitingUploa3 === void 0 || _props$onWaitingUploa3.call(props, {
files: [],
trigger: "remove"
});
setUploadValue([], changePrams);
} else if (!props.autoUpload) {
uploadValue.value.splice(p.index, 1);
setUploadValue(_toConsumableArray(uploadValue.value), changePrams);
} else {
if (p.index < uploadValue.value.length) {
uploadValue.value.splice(p.index, 1);
setUploadValue(_toConsumableArray(uploadValue.value), changePrams);
} else {
var _props$onWaitingUploa4;
toUploadFiles.value.splice(p.index - uploadValue.value.length, 1);
toUploadFiles.value = _toConsumableArray(toUploadFiles.value);
(_props$onWaitingUploa4 = props.onWaitingUploadFilesChange) === null || _props$onWaitingUploa4 === void 0 || _props$onWaitingUploa4.call(props, {
files: _toConsumableArray(toUploadFiles.value),
trigger: "remove"
});
}
}
(_props$onRemove = props.onRemove) === null || _props$onRemove === void 0 || _props$onRemove.call(props, p);
}
var cancelUpload = function cancelUpload(context) {
var _xhrReq$value, _props$onCancelUpload;
(_xhrReq$value = xhrReq.value) === null || _xhrReq$value === void 0 || _xhrReq$value.forEach(function (item) {
var _item$xhrReq;
(_item$xhrReq = item.xhrReq) === null || _item$xhrReq === void 0 || _item$xhrReq.abort();
});
uploading.value = false;
if (autoUpload !== null && autoUpload !== void 0 && autoUpload.value) {
toUploadFiles.value = toUploadFiles.value.map(function (item) {
return _objectSpread(_objectSpread({}, item), {}, {
status: "waiting"
});
});
} else {
setUploadValue(uploadValue.value.map(function (item) {
if (item.status !== "success") {
return _objectSpread(_objectSpread({}, item), {}, {
status: "waiting"
});
}
return item;
}), {
trigger: "abort"
});
}
if (context !== null && context !== void 0 && context.file && !(autoUpload !== null && autoUpload !== void 0 && autoUpload.value)) {
onInnerRemove === null || onInnerRemove === void 0 || onInnerRemove({
file: context.file,
e: context.e,
index: 0
});
}
(_props$onCancelUpload = props.onCancelUpload) === null || _props$onCancelUpload === void 0 || _props$onCancelUpload.call(props);
};
return {
toUploadFiles: toUploadFiles,
uploadValue: uploadValue,
displayFiles: displayFiles,
sizeOverLimitMessage: sizeOverLimitMessage,
uploading: uploading,
inputRef: inputRef,
disabled: disabled,
xhrReq: xhrReq,
uploadFilePercent: uploadFilePercent,
uploadFiles: uploadFiles,
onFileChange: onFileChange,
onNormalFileChange: onNormalFileChange,
onInnerRemove: onInnerRemove,
cancelUpload: cancelUpload
};
}
export { useUpload as default };
//# sourceMappingURL=useUpload.js.map