302 lines
11 KiB
JavaScript
302 lines
11 KiB
JavaScript
var __create = Object.create;
|
|
var __defProp = Object.defineProperty;
|
|
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
var __getProtoOf = Object.getPrototypeOf;
|
|
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
var __export = (target, all) => {
|
|
for (var name2 in all)
|
|
__defProp(target, name2, { get: all[name2], enumerable: true });
|
|
};
|
|
var __copyProps = (to, from, except, desc) => {
|
|
if (from && typeof from === "object" || typeof from === "function") {
|
|
for (let key of __getOwnPropNames(from))
|
|
if (!__hasOwnProp.call(to, key) && key !== except)
|
|
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
}
|
|
return to;
|
|
};
|
|
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
|
|
// If the importer is in node compatibility mode or this is not an ESM
|
|
// file that has been converted to a CommonJS file using a Babel-
|
|
// compatible transform (i.e. "__esModule" has not been set), then set
|
|
// "default" to the CommonJS "module.exports" for node compatibility.
|
|
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
|
|
mod
|
|
));
|
|
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
var stdin_exports = {};
|
|
__export(stdin_exports, {
|
|
default: () => stdin_default,
|
|
uploaderProps: () => uploaderProps
|
|
});
|
|
module.exports = __toCommonJS(stdin_exports);
|
|
var import_vue = require("vue");
|
|
var import_utils = require("../utils");
|
|
var import_utils2 = require("./utils");
|
|
var import_use = require("@vant/use");
|
|
var import_use_expose = require("../composables/use-expose");
|
|
var import_icon = require("../icon");
|
|
var import_image_preview = require("../image-preview");
|
|
var import_UploaderPreviewItem = __toESM(require("./UploaderPreviewItem"));
|
|
const uploaderProps = {
|
|
name: (0, import_utils.makeNumericProp)(""),
|
|
accept: (0, import_utils.makeStringProp)("image/*"),
|
|
capture: String,
|
|
multiple: Boolean,
|
|
disabled: Boolean,
|
|
readonly: Boolean,
|
|
lazyLoad: Boolean,
|
|
maxCount: (0, import_utils.makeNumericProp)(Infinity),
|
|
imageFit: (0, import_utils.makeStringProp)("cover"),
|
|
resultType: (0, import_utils.makeStringProp)("dataUrl"),
|
|
uploadIcon: (0, import_utils.makeStringProp)("photograph"),
|
|
uploadText: String,
|
|
deletable: import_utils.truthProp,
|
|
reupload: Boolean,
|
|
afterRead: Function,
|
|
showUpload: import_utils.truthProp,
|
|
modelValue: (0, import_utils.makeArrayProp)(),
|
|
beforeRead: Function,
|
|
beforeDelete: Function,
|
|
previewSize: [Number, String, Array],
|
|
previewImage: import_utils.truthProp,
|
|
previewOptions: Object,
|
|
previewFullImage: import_utils.truthProp,
|
|
maxSize: {
|
|
type: [Number, String, Function],
|
|
default: Infinity
|
|
}
|
|
};
|
|
var stdin_default = (0, import_vue.defineComponent)({
|
|
name: import_utils2.name,
|
|
props: uploaderProps,
|
|
emits: ["delete", "oversize", "clickUpload", "closePreview", "clickPreview", "clickReupload", "update:modelValue"],
|
|
setup(props, {
|
|
emit,
|
|
slots
|
|
}) {
|
|
const inputRef = (0, import_vue.ref)();
|
|
const urls = [];
|
|
const reuploadIndex = (0, import_vue.ref)(-1);
|
|
const isReuploading = (0, import_vue.ref)(false);
|
|
const getDetail = (index = props.modelValue.length) => ({
|
|
name: props.name,
|
|
index
|
|
});
|
|
const resetInput = () => {
|
|
if (inputRef.value) {
|
|
inputRef.value.value = "";
|
|
}
|
|
};
|
|
const onAfterRead = (items) => {
|
|
resetInput();
|
|
if ((0, import_utils2.isOversize)(items, props.maxSize)) {
|
|
if (Array.isArray(items)) {
|
|
const result = (0, import_utils2.filterFiles)(items, props.maxSize);
|
|
items = result.valid;
|
|
emit("oversize", result.invalid, getDetail());
|
|
if (!items.length) {
|
|
return;
|
|
}
|
|
} else {
|
|
emit("oversize", items, getDetail());
|
|
return;
|
|
}
|
|
}
|
|
items = (0, import_vue.reactive)(items);
|
|
if (reuploadIndex.value > -1) {
|
|
const arr = [...props.modelValue];
|
|
arr.splice(reuploadIndex.value, 1, items);
|
|
emit("update:modelValue", arr);
|
|
reuploadIndex.value = -1;
|
|
} else {
|
|
emit("update:modelValue", [...props.modelValue, ...(0, import_utils.toArray)(items)]);
|
|
}
|
|
if (props.afterRead) {
|
|
props.afterRead(items, getDetail());
|
|
}
|
|
};
|
|
const readFile = (files) => {
|
|
const {
|
|
maxCount,
|
|
modelValue,
|
|
resultType
|
|
} = props;
|
|
if (Array.isArray(files)) {
|
|
const remainCount = +maxCount - modelValue.length;
|
|
if (files.length > remainCount) {
|
|
files = files.slice(0, remainCount);
|
|
}
|
|
Promise.all(files.map((file) => (0, import_utils2.readFileContent)(file, resultType))).then((contents) => {
|
|
const fileList = files.map((file, index) => {
|
|
const result = {
|
|
file,
|
|
status: "",
|
|
message: "",
|
|
objectUrl: URL.createObjectURL(file)
|
|
};
|
|
if (contents[index]) {
|
|
result.content = contents[index];
|
|
}
|
|
return result;
|
|
});
|
|
onAfterRead(fileList);
|
|
});
|
|
} else {
|
|
(0, import_utils2.readFileContent)(files, resultType).then((content) => {
|
|
const result = {
|
|
file: files,
|
|
status: "",
|
|
message: "",
|
|
objectUrl: URL.createObjectURL(files)
|
|
};
|
|
if (content) {
|
|
result.content = content;
|
|
}
|
|
onAfterRead(result);
|
|
});
|
|
}
|
|
};
|
|
const onChange = (event) => {
|
|
const {
|
|
files
|
|
} = event.target;
|
|
if (props.disabled || !files || !files.length) {
|
|
return;
|
|
}
|
|
const file = files.length === 1 ? files[0] : [].slice.call(files);
|
|
if (props.beforeRead) {
|
|
const response = props.beforeRead(file, getDetail());
|
|
if (!response) {
|
|
resetInput();
|
|
return;
|
|
}
|
|
if ((0, import_utils.isPromise)(response)) {
|
|
response.then((data) => {
|
|
if (data) {
|
|
readFile(data);
|
|
} else {
|
|
readFile(file);
|
|
}
|
|
}).catch(resetInput);
|
|
return;
|
|
}
|
|
}
|
|
readFile(file);
|
|
};
|
|
let imagePreview;
|
|
const onClosePreview = () => emit("closePreview");
|
|
const previewImage = (item) => {
|
|
if (props.previewFullImage) {
|
|
const imageFiles = props.modelValue.filter(import_utils2.isImageFile);
|
|
const images = imageFiles.map((item2) => {
|
|
if (item2.objectUrl && !item2.url && item2.status !== "failed") {
|
|
item2.url = item2.objectUrl;
|
|
urls.push(item2.url);
|
|
}
|
|
return item2.url;
|
|
}).filter(Boolean);
|
|
imagePreview = (0, import_image_preview.showImagePreview)((0, import_utils.extend)({
|
|
images,
|
|
startPosition: imageFiles.indexOf(item),
|
|
onClose: onClosePreview
|
|
}, props.previewOptions));
|
|
}
|
|
};
|
|
const closeImagePreview = () => {
|
|
if (imagePreview) {
|
|
imagePreview.close();
|
|
}
|
|
};
|
|
const deleteFile = (item, index) => {
|
|
const fileList = props.modelValue.slice(0);
|
|
fileList.splice(index, 1);
|
|
emit("update:modelValue", fileList);
|
|
emit("delete", item, getDetail(index));
|
|
};
|
|
const reuploadFile = (index) => {
|
|
isReuploading.value = true;
|
|
reuploadIndex.value = index;
|
|
(0, import_vue.nextTick)(() => chooseFile());
|
|
};
|
|
const onInputClick = () => {
|
|
if (!isReuploading.value) {
|
|
reuploadIndex.value = -1;
|
|
}
|
|
isReuploading.value = false;
|
|
};
|
|
const renderPreviewItem = (item, index) => {
|
|
const needPickData = ["imageFit", "deletable", "reupload", "previewSize", "beforeDelete"];
|
|
const previewData = (0, import_utils.extend)((0, import_utils.pick)(props, needPickData), (0, import_utils.pick)(item, needPickData, true));
|
|
return (0, import_vue.createVNode)(import_UploaderPreviewItem.default, (0, import_vue.mergeProps)({
|
|
"item": item,
|
|
"index": index,
|
|
"onClick": () => emit(props.reupload ? "clickReupload" : "clickPreview", item, getDetail(index)),
|
|
"onDelete": () => deleteFile(item, index),
|
|
"onPreview": () => previewImage(item),
|
|
"onReupload": () => reuploadFile(index)
|
|
}, (0, import_utils.pick)(props, ["name", "lazyLoad"]), previewData), (0, import_utils.pick)(slots, ["preview-cover", "preview-delete"]));
|
|
};
|
|
const renderPreviewList = () => {
|
|
if (props.previewImage) {
|
|
return props.modelValue.map(renderPreviewItem);
|
|
}
|
|
};
|
|
const onClickUpload = (event) => emit("clickUpload", event);
|
|
const renderUpload = () => {
|
|
const lessThanMax = props.modelValue.length < +props.maxCount;
|
|
const Input = props.readonly ? null : (0, import_vue.createVNode)("input", {
|
|
"ref": inputRef,
|
|
"type": "file",
|
|
"class": (0, import_utils2.bem)("input"),
|
|
"accept": props.accept,
|
|
"capture": props.capture,
|
|
"multiple": props.multiple && reuploadIndex.value === -1,
|
|
"disabled": props.disabled,
|
|
"onChange": onChange,
|
|
"onClick": onInputClick
|
|
}, null);
|
|
if (slots.default) {
|
|
return (0, import_vue.withDirectives)((0, import_vue.createVNode)("div", {
|
|
"class": (0, import_utils2.bem)("input-wrapper"),
|
|
"onClick": onClickUpload
|
|
}, [slots.default(), Input]), [[import_vue.vShow, lessThanMax]]);
|
|
}
|
|
return (0, import_vue.withDirectives)((0, import_vue.createVNode)("div", {
|
|
"class": (0, import_utils2.bem)("upload", {
|
|
readonly: props.readonly
|
|
}),
|
|
"style": (0, import_utils.getSizeStyle)(props.previewSize),
|
|
"onClick": onClickUpload
|
|
}, [(0, import_vue.createVNode)(import_icon.Icon, {
|
|
"name": props.uploadIcon,
|
|
"class": (0, import_utils2.bem)("upload-icon")
|
|
}, null), props.uploadText && (0, import_vue.createVNode)("span", {
|
|
"class": (0, import_utils2.bem)("upload-text")
|
|
}, [props.uploadText]), Input]), [[import_vue.vShow, props.showUpload && lessThanMax]]);
|
|
};
|
|
const chooseFile = () => {
|
|
if (inputRef.value && !props.disabled) {
|
|
inputRef.value.click();
|
|
}
|
|
};
|
|
(0, import_vue.onBeforeUnmount)(() => {
|
|
urls.forEach((url) => URL.revokeObjectURL(url));
|
|
});
|
|
(0, import_use_expose.useExpose)({
|
|
chooseFile,
|
|
reuploadFile,
|
|
closeImagePreview
|
|
});
|
|
(0, import_use.useCustomFieldValue)(() => props.modelValue);
|
|
return () => (0, import_vue.createVNode)("div", {
|
|
"class": (0, import_utils2.bem)()
|
|
}, [(0, import_vue.createVNode)("div", {
|
|
"class": (0, import_utils2.bem)("wrapper", {
|
|
disabled: props.disabled
|
|
})
|
|
}, [renderPreviewList(), renderUpload()])]);
|
|
}
|
|
});
|