批量录入

啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊，组织语言真的好困难，希望自己慢慢会有进步

最近做了一个批量录入题目的项目，技术实现整体来说并不难。需求主要是将一份有着特定格式的.docx文件解析成后端需要的数据。

流程如下：

• 将一个已经编辑好题目内容、规定格式的.docx文件和一个从这个.docx文件转化出来的.txt文件上传到到文件上传界面；
• 文件上传界面将文件上传到批量录入服务器，在该服务器中进行内容提取和转化，生成后端需要格式的数据，并返回给操作页面；
• 工作人员对返回数据确认后即可提交到后端。

批量录入流程.png

这个项目的主要工作在于中间的批量上传服务器的实现，我们这里采用了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节点移除和重新渲染，然而并没有奏效】