啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊,组织语言真的好困难,希望自己慢慢会有进步
最近做了一个批量录入题目的项目,技术实现整体来说并不难。需求主要是将一份有着特定格式的.docx文件解析成后端需要的数据。
流程如下:
- 将一个已经编辑好题目内容、规定格式的
.docx
文件和一个从这个.docx
文件转化出来的.txt
文件上传到到文件上传界面; - 文件上传界面将文件上传到批量录入服务器,在该服务器中进行内容提取和转化,生成后端需要格式的数据,并返回给操作页面;
- 工作人员对返回数据确认后即可提交到后端。
这个项目的主要工作在于中间的批量上传服务器的实现,我们这里采用了
node
作为技术支持,服务器需要有文件获取与数据返回、文件内容提取与转化的功能。
批量录入服务器
文件获取与数据返回
1.为了快速实现一个文件上传服务器,这里用了koa
框架:
const http = require('http');
const Koa = require('koa');
const app = new Koa();
const koaBody = require('koa-body');
const router = require('koa-router')();
2.因为上传文件给这个服务器的页面是来自公司后台,存在跨域,所以还用了koa-cors
来允许跨域:
const cors = require('koa-cors');
...
app.use(cors());
3.上传的文件有题目和知识点两类,因此写了两个接口,不过基本类似,大同小异:
router.post('/upload/topic', async ctx => {
console.log('收到数据了');
ctx.response.type = 'json';
try {
ctx.response.body = await transform(ctx, 'topic');
return;
} catch (e) {
const data = {
code: 403,
data: null,
message: '数据解析错误,请检查文件后重新上传!'
};
ctx.response.body = JSON.stringify(data);
}
});
app.use(router.routes());
http.createServer(app.callback()).listen(9082);
其中transform
方法就是负责获取上传文件,然后把文件交给相应的内容提取转换的方法,并把最终处理后的数据作为相应内容返回给前端页面。transform
代码如下:
(ctx, type) => {
return new Promise(resolve => {
const hash = Date.now();
let finishedStream = 0;
const data = {
code: 0,
data: {},
message: 'ok'
};
try {
fs.accessSync('upload');
} catch (e) {
fs.mkdirSync('upload');
}
for (let i = 1; i <= 2; i++) {
const file = ctx.request.body.files[`files${i}`];
const reader = fs.createReadStream(file.path); // 创建可读流
const fileNames = file.name.split('.');
const ext = fileNames.pop(); // 获取上传文件扩展名
const upStream = fs.createWriteStream(`upload/question${hash}.${ext}`); // 创建可写流
reader.pipe(upStream); // 可读流通过管道写入可写流
upStream.on('close', async () => {
finishedStream ++;
if(finishedStream === 2) {
data.data = await getData('upload', `question${hash}`, type);
resolve(JSON.stringify(data));
}
});
}
});
}
为了方便,上传文件页面上选择一个文件夹进行上传,而后先由前端获取文件夹中的两个文件,再发送到node
服务器。因此服务器一次会收到两个文件,transform
方法把两个文件以question
加时间戳作为文件名保存到/upload
目录。保存完成后,调用getDate
方法对文件进行后续处理。
文件内容提取与转化
有待优化的地方
整个处理过程中自处理服务器接收到文件后,先将文件保存至/upload
目录,然后将保存好的.docx文件解压到同一目录,再把解压出来的图片发布到线上,接着读取.txt文件,把图片的线上地址填入其中...最后处理完后返回数据。
这中间有多次在磁盘读写文件的过程,由于刚开始对node
和解压工具不熟悉,导致对处理流程的规划不尽合理,这些读写磁盘的次数还可以大大减少,甚至完全省略(现在处理完毕之后确实也不产生任何磁盘文件)。
文件上传界面
问题: 在不刷新界面的情况下,两次上传相同的文件,不触发
change
事件。
原因:在上传文件中,change
事件监测文件是否发生改变,如果文件没有发生改变,则不触发改该事件。
在网上查看了许多解决方案,虽然我试了都不奏效(也可能是我使用姿势有问题),但是思路是确定的,即清空 file文件域
该项目采用了vue
,所以可以轻松通过v-if
来实现dom
的移除和渲染【ps: 尝试使用了原生js
的dom
节点移除和重新渲染,然而并没有奏效】