@fecp/mobile
Version:
226 lines (225 loc) • 8.74 kB
JavaScript
/* empty css */
/* empty css */
/* empty css */
/* empty css */
/* empty css */
/* empty css */
/* empty css */
/* empty css */
/* empty css */
/* empty css */
/* empty css */
import { computed, createBlock, openBlock, mergeProps, unref, isRef, createSlots, withCtx, createElementBlock, createCommentVNode, createVNode, toDisplayString } from "vue";
import { useDataSource } from "../../../utils/dataSourceUtil.mjs";
/* empty css */
import _export_sfc from "../../../../../../_virtual/_plugin-vue_export-helper.mjs";
import { Uploader } from "../../../../../../node_modules/.pnpm/vant@4.9.17_vue@3.5.13_typescript@5.7.3_/node_modules/vant/es/uploader/index.mjs";
import { showToast } from "../../../../../../node_modules/.pnpm/vant@4.9.17_vue@3.5.13_typescript@5.7.3_/node_modules/vant/es/toast/function-call.mjs";
import "../../../../../../node_modules/.pnpm/vant@4.9.17_vue@3.5.13_typescript@5.7.3_/node_modules/vant/es/toast/index.mjs";
import { Icon } from "../../../../../../node_modules/.pnpm/vant@4.9.17_vue@3.5.13_typescript@5.7.3_/node_modules/vant/es/icon/index.mjs";
const _hoisted_1 = {
key: 0,
class: "preview-cover van-ellipsis"
};
const _hoisted_2 = {
key: 1,
class: "preview-cover van-ellipsis"
};
const _hoisted_3 = {
key: 0,
class: "van-uploader__preview-delete--shadow"
};
const _sfc_main = {
__name: "Uploader",
props: {
modelValue: {
type: Array,
default: []
},
autoUpload: {
//选择文件后自动上传
type: Boolean,
default: false
},
dataSource: {
type: String,
default: ""
},
dataSourceParams: {
type: Object,
default: {}
},
acceptType: {
//上传文件类型
type: Array,
default: []
},
maxSize: {
//文件大小限制，单位为 MB
type: Number,
default: 5
},
previewSize: {
//上传区域的尺寸
type: Number,
default: 80
},
readonly: {
type: Boolean,
default: false
}
},
emits: ["update:modelValue"],
setup(__props, { emit: __emit }) {
const props = __props;
const emit = __emit;
const fileList = computed({
get: () => {
return props.modelValue;
},
set: (val) => {
emit("update:modelValue", val);
}
});
const compMaxSize = computed(() => {
return props.maxSize * 1024 * 1024;
});
const accept = computed(() => {
const acceptArr = [];
if (props.acceptType.includes("all")) {
return "";
}
if (props.acceptType.includes("image")) {
acceptArr.push("image/*");
}
if (props.acceptType.includes("video")) {
acceptArr.push("video/*");
}
if (props.acceptType.includes("audio")) {
acceptArr.push("audio/*");
}
if (props.acceptType.includes("text")) {
acceptArr.push("text/plain");
}
if (props.acceptType.includes("doc")) {
acceptArr.push(".doc");
acceptArr.push(".docx");
}
if (props.acceptType.includes("xls")) {
acceptArr.push(".xls");
acceptArr.push(".xlsx");
}
if (props.acceptType.includes("ppt")) {
acceptArr.push(".ppt");
acceptArr.push(".pptx");
}
if (props.acceptType.includes("pdf")) {
acceptArr.push("application/pdf");
}
if (props.acceptType.includes("zip")) {
acceptArr.push("application/zip");
acceptArr.push("application/x-rar-compressed");
}
return acceptArr.join(",");
});
const validators = {
image: (file) => isImage(file),
video: (file) => file.type.startsWith("video/"),
audio: (file) => file.type.startsWith("audio/"),
text: (file) => file.type === "text/plain",
doc: (file) => [".doc", ".docx"].some((ext) => file.name.endsWith(ext)),
xls: (file) => [".xls", ".xlsx"].some((ext) => file.name.endsWith(ext)),
ppt: (file) => [".ppt", ".pptx"].some((ext) => file.name.endsWith(ext)),
pdf: (file) => file.type === "application/pdf",
zip: (file) => ["application/zip", "application/x-rar-compressed"].includes(file.type)
};
const isImage = (file) => {
return ["image/jpeg", "image/png", "image/gif", "image/svg+xml"].includes(
file == null ? void 0 : file.type
);
};
const typeChineseMap = {
image: "图片",
video: "视频",
audio: "音频",
text: "文本",
doc: "Word文档",
xls: "Excel文档",
ppt: "PowerPoint文档",
pdf: "PDF文档",
zip: "压缩包"
};
const beforeRead = (file) => {
const isValid = props.acceptType.some(
(type) => validators[type] && validators[type](file)
);
if (!isValid) {
showToast(
`请上传有效的文件类型：${props.acceptType.map((type) => typeChineseMap[type]).join("、")}`
);
return false;
}
return true;
};
const afterRead = (file) => {
if (!props.autoUpload) {
file.status = "waiting";
file.message = "等待上传";
return;
}
file.status = "uploading";
file.message = "上传中...";
const dataSource = useDataSource(props.dataSource);
dataSource == null ? void 0 : dataSource.load({ file: file.file, ...props.dataSourceParams }).then((res) => {
file.status = "done";
file.message = "上传成功";
}).catch((err) => {
file.status = "failed";
file.message = "上传失败";
});
};
const onOversize = (file) => {
console.log(file);
showToast(`文件大小不能超过 ${props.maxSize}kb`);
};
return (_ctx, _cache) => {
const _component_van_icon = Icon;
const _component_van_uploader = Uploader;
return openBlock(), createBlock(_component_van_uploader, mergeProps({ class: "fac-uploader" }, _ctx.$attrs, {
modelValue: unref(fileList),
"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => isRef(fileList) ? fileList.value = $event : null),
accept: unref(accept),
"after-read": afterRead,
"before-read": beforeRead,
onOversize,
"max-size": unref(compMaxSize),
"result-type": "file",
readonly: __props.readonly,
"preview-size": __props.previewSize + "px"
}), createSlots({
"preview-cover": withCtx(({ file, name, fileName }) => [
isImage(file) ? (openBlock(), createElementBlock("div", _hoisted_1, toDisplayString((file == null ? void 0 : file.name) || (file == null ? void 0 : file.fileName) || ""), 1)) : name ? (openBlock(), createElementBlock("div", _hoisted_2, toDisplayString(name || fileName), 1)) : createCommentVNode("", true)
]),
"preview-delete": withCtx(() => [
!__props.readonly ? (openBlock(), createElementBlock("div", _hoisted_3, [
createVNode(_component_van_icon, {
name: "cross",
class: "van-uploader__preview-delete-icon"
})
])) : createCommentVNode("", true)
]),
_: 2
}, [
__props.readonly ? {
name: "default",
fn: withCtx(() => []),
key: "0"
} : void 0
]), 1040, ["modelValue", "accept", "max-size", "readonly", "preview-size"]);
};
}
};
const _Uploader = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-61f0fd62"]]);
export {
_Uploader as default
};