最近 一个上传组件假上传，转化html在上传
<t-dialog v-model:visible="dVisible" :cancelBtn="null" @confirm="dVisible = false" width="600">
<div class="upload-area">
<t-upload v-model="files" :requestMethod="handleUpload" placeholder="支持批量上传文件，文件格式不限，最多只能上传 10 份文件"
:showUploadProgress="false" theme="file-flow" multiple :abridge-name="ABRIDGE_NAME" :auto-upload="true"
:max="10" :show-thumbnail="false" :allow-upload-duplicate-file="false" :is-batch-upload="false"
:upload-all-files-in-one-request="true" @success="handleUploadSuccess"></t-upload>
</div>
</t-dialog>
<script lang="ts">
//假上传
function handleUpload(fileList: UploadFile | UploadFile[]): Promise<any> {
// 模拟异步操作，比如网络请求
return new Promise((resolve) => {
setTimeout(() => {
// 创建一个模拟的成功响应
const response = {
status: 'success',
response: {
files: [{ url: 'https://xxx.png', name: fileList[0].name, files: fileList[0].raw }]
}
};
resolve(response);
}, 1000); // 模拟延迟
});
}
// 处理上传成功
const handleUploadSuccess = async (responses) => {
if (files.value.length === 0) return
try {
//
const file = responses.currentFiles[0]
const exists = await checkFileExists(file.name)
if (exists) {
MessagePlugin.error('文件已存在于服务器')
return
}
// 转换文档为HTML
//读取文件转为html格式的文档
const html = await convertFileToHtml(file.raw)
console.log('html:', html)
// 处理文档
processDocument(html)
hasFile.value = true
} catch (error) {
MessagePlugin.error('文档处理失败')
console.error(error)
}
}
// 处理文档HTML
const processDocument = (html: string) => {
processedHtml.value = '';
const tempDiv = document.createElement('span');
tempDiv.innerHTML = html;
// 处理标题和段落
const paragraphs = [];
Array.from(tempDiv.children).forEach(element => {
if (element.tagName === 'H1' || element.tagName === 'H2') {
// 如果是标题，直接添加到新的数组中
paragraphs.push(element.outerHTML);
} else {
const sentencesArray = extractAndProcessTextNodes(element);
if (sentencesArray && sentencesArray.length > 0) {
// 将句子数组转换为HTML结构
sentencesArray.forEach(sentence => {
const sentenceSpan = document.createElement('span');
sentenceSpan.className = 'sentence';
sentenceSpan.textContent = sentence;
paragraphs.push(sentenceSpan.outerHTML);
});
}
}
});
// 设置处理后的HTML
processedHtml.value = paragraphs.join('\n');
// htmlData.value = processedHtml.value;
// console.log(' processedHtml.value:', processedHtml.value)
sendHtml(paragraphs);
// 下一轮DOM更新后高亮已有标注
nextTick(() => {
});
};
const sendHtml = async (paragraphs) => {
console.log('processedHtml.value:', processedHtml.value)
const query = {
projectBizCode: projectBizCode.value,
taskBizCode: taskBizCode.value,
fileName: files.value[0].name,
sentences: paragraphs,
}
console.log('query:', query)
try {
const res = await sendHtmlFile(query)
} catch (error) {
console.error('Error sending HTML file:', error);
}
}
</script>
