123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135 |
- import { watch } from 'vue';
- import { isNil } from 'lodash-unified';
- import { useVModel } from '@vueuse/core';
- import '../../../utils/index.mjs';
- import { genFileId } from './upload.mjs';
- import { debugWarn, throwError } from '../../../utils/error.mjs';
- const SCOPE = "ElUpload";
- const revokeObjectURL = (file) => {
- var _a;
- if ((_a = file.url) == null ? void 0 : _a.startsWith("blob:")) {
- URL.revokeObjectURL(file.url);
- }
- };
- const useHandlers = (props, uploadRef) => {
- const uploadFiles = useVModel(props, "fileList", void 0, { passive: true });
- const getFile = (rawFile) => uploadFiles.value.find((file) => file.uid === rawFile.uid);
- function abort(file) {
- var _a;
- (_a = uploadRef.value) == null ? void 0 : _a.abort(file);
- }
- function clearFiles(states = ["ready", "uploading", "success", "fail"]) {
- uploadFiles.value = uploadFiles.value.filter((row) => !states.includes(row.status));
- }
- const handleError = (err, rawFile) => {
- const file = getFile(rawFile);
- if (!file)
- return;
- console.error(err);
- file.status = "fail";
- uploadFiles.value.splice(uploadFiles.value.indexOf(file), 1);
- props.onError(err, file, uploadFiles.value);
- props.onChange(file, uploadFiles.value);
- };
- const handleProgress = (evt, rawFile) => {
- const file = getFile(rawFile);
- if (!file)
- return;
- props.onProgress(evt, file, uploadFiles.value);
- file.status = "uploading";
- file.percentage = Math.round(evt.percent);
- };
- const handleSuccess = (response, rawFile) => {
- const file = getFile(rawFile);
- if (!file)
- return;
- file.status = "success";
- file.response = response;
- props.onSuccess(response, file, uploadFiles.value);
- props.onChange(file, uploadFiles.value);
- };
- const handleStart = (file) => {
- if (isNil(file.uid))
- file.uid = genFileId();
- const uploadFile = {
- name: file.name,
- percentage: 0,
- status: "ready",
- size: file.size,
- raw: file,
- uid: file.uid
- };
- if (props.listType === "picture-card" || props.listType === "picture") {
- try {
- uploadFile.url = URL.createObjectURL(file);
- } catch (err) {
- debugWarn(SCOPE, err.message);
- props.onError(err, uploadFile, uploadFiles.value);
- }
- }
- uploadFiles.value = [...uploadFiles.value, uploadFile];
- props.onChange(uploadFile, uploadFiles.value);
- };
- const handleRemove = async (file) => {
- const uploadFile = file instanceof File ? getFile(file) : file;
- if (!uploadFile)
- throwError(SCOPE, "file to be removed not found");
- const doRemove = (file2) => {
- abort(file2);
- const fileList = uploadFiles.value;
- fileList.splice(fileList.indexOf(file2), 1);
- props.onRemove(file2, fileList);
- revokeObjectURL(file2);
- };
- if (props.beforeRemove) {
- const before = await props.beforeRemove(uploadFile, uploadFiles.value);
- if (before !== false)
- doRemove(uploadFile);
- } else {
- doRemove(uploadFile);
- }
- };
- function submit() {
- uploadFiles.value.filter(({ status }) => status === "ready").forEach(({ raw }) => {
- var _a;
- return raw && ((_a = uploadRef.value) == null ? void 0 : _a.upload(raw));
- });
- }
- watch(() => props.listType, (val) => {
- if (val !== "picture-card" && val !== "picture") {
- return;
- }
- uploadFiles.value = uploadFiles.value.map((file) => {
- const { raw, url } = file;
- if (!url && raw) {
- try {
- file.url = URL.createObjectURL(raw);
- } catch (err) {
- props.onError(err, file, uploadFiles.value);
- }
- }
- return file;
- });
- });
- watch(uploadFiles, (files) => {
- for (const file of files) {
- file.uid || (file.uid = genFileId());
- file.status || (file.status = "success");
- }
- }, { immediate: true, deep: true });
- return {
- uploadFiles,
- abort,
- clearFiles,
- handleError,
- handleProgress,
- handleStart,
- handleSuccess,
- handleRemove,
- submit
- };
- };
- export { useHandlers };
- //# sourceMappingURL=use-handlers.mjs.map
|