vue3+Axios+docx-preview+spring boot实现docx文档上传及在线预览

文章目录

前言

一、项目说明

二、踩坑记录

总结

---

前言

        使用新系统不太熟悉，胡乱尝试废了很多时间，在此记录一下踩坑流程

---

一、项目说明

 * 项目说明：在线文档阅读系统，采用前后端分离模式，具有登陆系统，可以在客户端浏览器选择上传本地docx文档，可以在线阅览阅读服务器端docx文档

 * 前端使用vue+nodejs+vite构建单页面网页程序，页面路由由vue负责，使用axios与后端restful接口进行数据交换

 * 文档阅览使用docx-preview插件，该插件接受docx格式二进制流并可由浏览器直接渲染文档，上传文件时将docx文档转换成blob格式以formdata文件形式发至后台

 * 后端采用spring boot+mybatis plus构建，主要负责登录校验和文档存储

 * 后台接收为mutipartfile格式，以二进制blob存入MySQL数据库

 * 返回时将数据库中blob文件直接以arraybuffer形式传回前端由docx-preview负责解析

二、踩坑记录

axios传输部分

axios可以与spring boot后台以application/json格式交换数据，json对象会被转换成json字符串发送至后台

如果需要传输除了json对象以外的文件等内容，使用formdata进行传输

将blob二进制/文件二进制字节数组/bloburl字符串等直接传回spring boot会导致解码失败

使用axios传输formdata时要设置header的contentType属性否则会导致请求失败

axios接收部分

使用axios接收后台传来的arraybuffer时需要设置responseType

spring boot方面

@RequestBody注解只能够解析json字符串，无法解析其他类型数据

@RequestParam注解需要使用前端表单约定好的名称去接收非json文件内容，否则读不到参数

@ResponseBody和@RestController注解表示返回类型为application/json字符串

跨域设置@CrossOrigin

---

总结

        运用没有系统学习过的组件写项目最重要的就是锁定问题出现在什么地方，然后针对相应的问题去挖掘解决方案，和问题相关的基础知识是必须要牢牢掌握的