码前课-知识分享-JavaScript+nodejs-加载md文件

JavaScript+nodejs-加载md文件

案例展示

一、案例展示

案例分析

1. 前端上传（md）文件，再利用（ajax）发送请求，并把文件数据提交给后端
2. 后端接受文件数据并保存，然后读取文件，利用（marked）模块对数据进行转换，最后返回json数据
3. 返回的数据直接添加就可以加载md类型的文件了

案例代码

一、前端

• js部分
  • 注意：返回的是FormData对象类型的数据

//js文件
<script>
        $(function () {
            // 上传到后端
            $('#submit').on('click', function (e) {
                e.preventDefault();
                var md = new FormData($('#form')[0]);
                $.ajax({
                    type: 'post',
                    url: "http://127.0.0.1:4399/img",
                    data: md,
                    dataType: 'json',
                    contentType: false,
                    processData: false,
                    success: function (data) {
                        $("#test").append(data);
                    }
                })
            })

        })
    </script>

• html部分

<form id='form' onsubmit="return false" action="##">
        <div>

            <input type="file" name="md" class="file" id='file'><br>
        </div>
        <div>
            <input type="button" value="提交" id="submit">
        </div>
    </form>
    <div id="test"></div>

// 接受form类型的数据并存到本地的文件夹中
app.post('/img', upload.single('md'), (req, res) => {
    fs.readFile(req.file.path, 'utf-8', (err, data) => {
        if (err) throw err;
        str = marked(data.toString());
        res.json(str);
    })
})