更新
This commit is contained in:
@ -1,227 +0,0 @@
|
||||
<template>
|
||||
<div>
|
||||
<el-dialog v-model="modelValue" title="文件解析" width="1000px" :show-close="true" :center="true" :close-on-click-modal="false" :before-close="handleClose" >
|
||||
|
||||
<h1>文件文本提取工具</h1>
|
||||
<p>上传文件提取文本内容（支持 .txt, .pdf, .docx, mp4 , mp3, wav）</p>
|
||||
|
||||
<div class="container">
|
||||
<input type="file" id="file-input" accept=".txt,.pdf,.docx,'.mp4','.mp3','.wav'"/>
|
||||
<button @click="chooseFile">选择文件</button>
|
||||
<p id="file-info">未选择文件</p>
|
||||
</div>
|
||||
|
||||
<button id="extract-btn" disabled>提取文本</button>
|
||||
|
||||
<h3>提取结果：</h3>
|
||||
<div id="result">请先上传文件...</div>
|
||||
<template #footer>
|
||||
<el-button @click="handleClose">取消</el-button>
|
||||
<el-button type="primary" @click="onComfirm">确认</el-button>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { nextTick, onMounted, ref } from "vue";
|
||||
const props = defineProps({
|
||||
modelValue: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
});
|
||||
const emits = defineEmits(["update:modelValue", "change"]);
|
||||
onMounted(() => {
|
||||
nextTick(() => {
|
||||
const fileInput = document.getElementById("file-input");
|
||||
const fileInfo = document.getElementById("file-info");
|
||||
const extractBtn = document.getElementById("extract-btn");
|
||||
const resultDiv = document.getElementById("result");
|
||||
let selectedFile = null;
|
||||
// 监听文件选择
|
||||
fileInput.addEventListener("change", function (e) {
|
||||
if (e.target.files.length > 0) {
|
||||
selectedFile = e.target.files[0];
|
||||
fileInfo.textContent = `已选择: ${selectedFile.name} (${(
|
||||
selectedFile.size / 1024
|
||||
).toFixed(2)} KB)`;
|
||||
extractBtn.disabled = false;
|
||||
} else {
|
||||
selectedFile = null;
|
||||
fileInfo.textContent = "未选择文件";
|
||||
extractBtn.disabled = true;
|
||||
}
|
||||
if (selectedFile.type == "video/mp4") {
|
||||
upfileOnchange(selectedFile);
|
||||
}
|
||||
});
|
||||
// 提取文本按钮点击事件
|
||||
extractBtn.addEventListener("click", async function () {
|
||||
if (!selectedFile) return (resultDiv.textContent = "请先选择文件");
|
||||
resultDiv.textContent = "正在处理文件...";
|
||||
try {
|
||||
let text = "";
|
||||
const fileType = selectedFile.name.split(".").pop().toLowerCase();
|
||||
console.log(selectedFile);
|
||||
|
||||
if (fileType === "txt") {
|
||||
// 处理文本文件
|
||||
text = await readTextFile(selectedFile);
|
||||
} else if (fileType === "pdf") {
|
||||
// 处理PDF文件
|
||||
text = await extractTextFromPDF(selectedFile);
|
||||
} else if (fileType === "docx") {
|
||||
// 处理Word文件
|
||||
text = await extractTextFromDocx(selectedFile);
|
||||
console.log(text, "===word");
|
||||
} else if (["mp4", "mp3", "wav"].includes(fileType)) {
|
||||
// 处理mp4,mp3,wav文件
|
||||
await start();
|
||||
text = "数据加载有点慢，请稍等。。。。";
|
||||
setTimeout(() => {
|
||||
resultDiv.textContent = videoText;
|
||||
}, 2000);
|
||||
} else {
|
||||
throw new Error("不支持的文件类型");
|
||||
}
|
||||
resultDiv.textContent = text || "未提取到文本内容";
|
||||
} catch (error) {
|
||||
resultDiv.textContent = `处理失败: ${error.message}`;
|
||||
console.error(error);
|
||||
}
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
// 读取文本文件
|
||||
function readTextFile(file) {
|
||||
return new Promise((resolve, reject) => {
|
||||
const reader = new FileReader();
|
||||
reader.onload = (e) => resolve(e.target.result);
|
||||
reader.onerror = (e) => reject(new Error("文件读取失败"));
|
||||
reader.readAsText(file);
|
||||
});
|
||||
}
|
||||
|
||||
// 提取PDF文本
|
||||
async function extractTextFromPDF(file) {
|
||||
return new Promise((resolve, reject) => {
|
||||
const fileReader = new FileReader();
|
||||
|
||||
fileReader.onload = async function () {
|
||||
try {
|
||||
const typedArray = new Uint8Array(this.result);
|
||||
const pdf = await pdfjsLib.getDocument(typedArray).promise;
|
||||
let fullText = "";
|
||||
|
||||
for (let i = 1; i <= pdf.numPages; i++) {
|
||||
const page = await pdf.getPage(i);
|
||||
const textContent = await page.getTextContent();
|
||||
const text = textContent.items.map((item) => item.str).join(" ");
|
||||
fullText += text + "\n\n";
|
||||
}
|
||||
|
||||
resolve(fullText);
|
||||
} catch (error) {
|
||||
reject(error);
|
||||
}
|
||||
};
|
||||
|
||||
fileReader.onerror = reject;
|
||||
fileReader.readAsArrayBuffer(file);
|
||||
});
|
||||
}
|
||||
|
||||
// 提取Word文档文本
|
||||
async function extractTextFromDocx(file) {
|
||||
return new Promise((resolve, reject) => {
|
||||
const reader = new FileReader();
|
||||
|
||||
reader.onload = function (event) {
|
||||
const arrayBuffer = event.target.result;
|
||||
|
||||
mammoth
|
||||
.extractRawText({ arrayBuffer: arrayBuffer })
|
||||
.then(function (result) {
|
||||
resolve(result.value);
|
||||
})
|
||||
.catch(function (error) {
|
||||
reject(error);
|
||||
});
|
||||
};
|
||||
|
||||
reader.onerror = reject;
|
||||
reader.readAsArrayBuffer(file);
|
||||
});
|
||||
}
|
||||
|
||||
const onComfirm = () => {
|
||||
const resultDiv = document.getElementById("result");
|
||||
let obj = {
|
||||
text: resultDiv.textContent
|
||||
};
|
||||
emits("change", obj);
|
||||
};
|
||||
|
||||
// 关闭
|
||||
const handleClose = () => {
|
||||
const resultDiv = document.getElementById("result");
|
||||
resultDiv.textContent = "请先上传文件";
|
||||
const fileInfo = document.getElementById("file-info");
|
||||
fileInfo.textContent = "未选择文件";
|
||||
emits("update:modelValue", false);
|
||||
};
|
||||
|
||||
const chooseFile = () => {
|
||||
document.getElementById("file-input").click();
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.container {
|
||||
border: 2px dashed #ccc;
|
||||
padding: 20px;
|
||||
text-align: center;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
#file-input {
|
||||
display: none;
|
||||
}
|
||||
|
||||
button {
|
||||
background: #0072ff;
|
||||
color: white;
|
||||
padding: 10px 15px;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
font-size: 16px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
button:hover {
|
||||
background: #0072ff;
|
||||
}
|
||||
|
||||
#result {
|
||||
margin-top: 20px;
|
||||
white-space: pre-wrap;
|
||||
background: #f9f9f9;
|
||||
padding: 15px;
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 4px;
|
||||
height: 320px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
#file-info {
|
||||
margin: 10px 0;
|
||||
font-style: italic;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
::v-deep .el-dialog {
|
||||
margin-top: 10px;
|
||||
}
|
||||
</style>
|
||||
@ -277,6 +277,7 @@ const changeRadio = (val) =>{
|
||||
files.value = {}
|
||||
alertText.value = '请先上传文件...';
|
||||
texts.value = []
|
||||
image.value = ''
|
||||
}
|
||||
const onComfirm = () => {
|
||||
|
||||
|
||||
Reference in New Issue
Block a user