先使用useSelectFile选择本地文件，然后对本地文件进行内容解析并读取成文本字符串
@niu-tools/vue3
是否读取中：false
读取失败原因：
读取结果：
<script setup lang="ts">
import { ref } from 'vue'
import { useReadFileContent } from '@niu-tools/vue3'
const { loading, error, execute } = useReadFileContent()
const result = ref()
async function readFile() {
result.value = await execute()
console.log(result.value);
}
</script>
<template>
<div>
<n-button @click="readFile()">读取文件</n-button>
<div>是否读取中：{{ loading }}</div>
<div>读取失败原因：{{ error }}</div>
<div>读取结果：</div>
<n-input
readonly
placeholder="空"
v-model:value="result"
type="textarea"
/>
</div>
</template><script setup lang="ts">
import { ref } from 'vue'
import { useReadFileContent } from '@niu-tools/vue3'
const { loading, error, execute } = useReadFileContent()
const result = ref()
async function readFile() {
result.value = await execute()
console.log(result.value);
}
</script>
<template>
<div>
<n-button @click="readFile()">读取文件</n-button>
<div>是否读取中：{{ loading }}</div>
<div>读取失败原因：{{ error }}</div>
<div>读取结果：</div>
<n-input
readonly
placeholder="空"
v-model:value="result"
type="textarea"
/>
</div>
</template>源码
查看源码
useReadFileContent/index.ts源码
ts
export * from "./useReadFileContent"export * from "./useReadFileContent"useReadFileContent/useReadFileContent.ts源码
ts
import { ref, watch } from 'vue';
import { FileSelectCancelError, IllegalFileError } from '../vc-utils';
import { useSelectFile } from '../useSelectFile';
export const useReadFileContent = () => {
const loading = ref<boolean>(false);
const error = ref<FileSelectCancelError | IllegalFileError | any>();
const { error: selectFileError, execute: selectFileExecute } = useSelectFile();
watch(
() => selectFileError.value,
(e) => {
error.value = e;
}
);
const execute = async (accepts: string[] = ['*']): Promise<string | undefined> => {
try {
loading.value = true;
const files = (await selectFileExecute(accepts)) ?? [];
const fileReader = new FileReader();
return new Promise((resolve, reject) => {
fileReader.onload = ({ target }) => {
resolve(target?.result as string);
};
fileReader.onerror = (e) => {
error.value = e;
reject(error.value);
};
fileReader.readAsText(files[0]);
});
} catch (e) {
error.value = e;
} finally {
loading.value = false;
}
};
return {
loading,
error,
execute,
};
};
export default useReadFileContent;import { ref, watch } from 'vue';
import { FileSelectCancelError, IllegalFileError } from '../vc-utils';
import { useSelectFile } from '../useSelectFile';
export const useReadFileContent = () => {
const loading = ref<boolean>(false);
const error = ref<FileSelectCancelError | IllegalFileError | any>();
const { error: selectFileError, execute: selectFileExecute } = useSelectFile();
watch(
() => selectFileError.value,
(e) => {
error.value = e;
}
);
const execute = async (accepts: string[] = ['*']): Promise<string | undefined> => {
try {
loading.value = true;
const files = (await selectFileExecute(accepts)) ?? [];
const fileReader = new FileReader();
return new Promise((resolve, reject) => {
fileReader.onload = ({ target }) => {
resolve(target?.result as string);
};
fileReader.onerror = (e) => {
error.value = e;
reject(error.value);
};
fileReader.readAsText(files[0]);
});
} catch (e) {
error.value = e;
} finally {
loading.value = false;
}
};
return {
loading,
error,
execute,
};
};
export default useReadFileContent;