54 lines
1.1 KiB
TypeScript
54 lines
1.1 KiB
TypeScript
import { useFileDialog } from "@vueuse/core";
|
|
|
|
export const useUploadImage = (
|
|
updateImageFn: (file: File) => void,
|
|
maxSizeMB: number = 5,
|
|
) => {
|
|
// 打开文件选择对话框
|
|
const { open, onChange } = useFileDialog({
|
|
accept: "image/*",
|
|
multiple: false,
|
|
});
|
|
|
|
const handleUploadFile = async (files: File[] | FileList) => {
|
|
const file = files?.[0];
|
|
if (!file) return;
|
|
|
|
const sizeMB = file.size / (1024 * 1024);
|
|
|
|
if (sizeMB > maxSizeMB) {
|
|
return;
|
|
}
|
|
|
|
updateImageFn(file);
|
|
};
|
|
|
|
// 监听选择的文件
|
|
onChange(async (files) => {
|
|
if (files) {
|
|
await handleUploadFile(files);
|
|
}
|
|
});
|
|
|
|
// 拖拽上传
|
|
const handleDrop = (event: DragEvent) => {
|
|
if (event.dataTransfer?.files) {
|
|
handleUploadFile(event.dataTransfer.files).then();
|
|
}
|
|
};
|
|
|
|
// 粘贴上传
|
|
const handlePaste = (event: ClipboardEvent) => {
|
|
const file = Array.from(event.clipboardData?.items || [])
|
|
.find((item) => item.type.startsWith("image/"))
|
|
?.getAsFile();
|
|
if (file) handleUploadFile([file]).then();
|
|
};
|
|
|
|
return {
|
|
open,
|
|
handleDrop,
|
|
handlePaste,
|
|
};
|
|
};
|