动态生成一个 input 的文件选择框进行模拟点击
@niu-tools/vue3
选择多个文件
是否选择中：false
选择失败原因：
选择的文件
<script setup lang="ts">
import { ref } from 'vue'
import { useSelectFile } from '@niu-tools/vue3'
const { loading, error, execute } = useSelectFile()
const result = ref<File[]>()
async function readFile() {
result.value = await execute(['*'], true)
console.log(result.value)
}
</script>
<template>
<div>
<n-card title="选择多个文件">
<n-button @click="readFile()">选择文件</n-button>
<div>是否选择中：{{ loading }}</div>
<div>选择失败原因：{{ error }}</div>
<div>选择的文件</div>
<ul>
<li v-for="item in result">{{ item.name }}</li>
</ul>
</n-card>
</div>
</template><script setup lang="ts">
import { ref } from 'vue'
import { useSelectFile } from '@niu-tools/vue3'
const { loading, error, execute } = useSelectFile()
const result = ref<File[]>()
async function readFile() {
result.value = await execute(['*'], true)
console.log(result.value)
}
</script>
<template>
<div>
<n-card title="选择多个文件">
<n-button @click="readFile()">选择文件</n-button>
<div>是否选择中：{{ loading }}</div>
<div>选择失败原因：{{ error }}</div>
<div>选择的文件</div>
<ul>
<li v-for="item in result">{{ item.name }}</li>
</ul>
</n-card>
</div>
</template>源码
查看源码
useSelectFile/index.ts源码
ts
export * from "./useSelectFile"export * from "./useSelectFile"useSelectFile/useSelectFile.ts源码
ts
import { ref } from 'vue';
import { FileSelectCancelError, IllegalFileError, selectFile } from '../vc-utils';
export const useSelectFile = () => {
const loading = ref<boolean>(false);
const error = ref<FileSelectCancelError | IllegalFileError>();
/**
* 执行选择文件
* @param accepts 选择文件的类型
* @returns 是否选择多个
*/
const execute = async (accepts: string[] = ['*'], multiple: boolean = false): Promise<File[]> => {
try {
loading.value = true;
const files = await selectFile(accepts, multiple);
return files;
} catch (e) {
if (e instanceof FileSelectCancelError || e instanceof IllegalFileError) {
error.value = e;
}
throw e;
} finally {
loading.value = false;
}
};
return {
loading,
error,
execute,
};
};import { ref } from 'vue';
import { FileSelectCancelError, IllegalFileError, selectFile } from '../vc-utils';
export const useSelectFile = () => {
const loading = ref<boolean>(false);
const error = ref<FileSelectCancelError | IllegalFileError>();
/**
* 执行选择文件
* @param accepts 选择文件的类型
* @returns 是否选择多个
*/
const execute = async (accepts: string[] = ['*'], multiple: boolean = false): Promise<File[]> => {
try {
loading.value = true;
const files = await selectFile(accepts, multiple);
return files;
} catch (e) {
if (e instanceof FileSelectCancelError || e instanceof IllegalFileError) {
error.value = e;
}
throw e;
} finally {
loading.value = false;
}
};
return {
loading,
error,
execute,
};
};