vue+jsonrpc+mongoDB文件传输解决方案（任意格式文件）

最新推荐文章于 2024-05-05 13:10:57 发布

weideng_san

最新推荐文章于 2024-05-05 13:10:57 发布

阅读量2k

点赞数

分类专栏：前端 java 文章标签：文件传输 jsonrpc mongoDB vue

本文链接：https://blog.csdn.net/qq_26963495/article/details/85244789

版权

本文介绍了如何在Vue前端和Spring后端使用JSONRPC进行文件的上传和下载。通过将文件转化为Base64编码的字符串，利用JSONRPC传输，后端接收到字符串后再解码为二进制存储到MongoDB。下载时，后端将MongoDB中的文件转换回DataURL，前端解析后下载。

摘要由CSDN通过智能技术生成

环境及需求：

前端采用vue；后端采用spring，但是只用到了spring的对象注入功能，未使用spring web相关功能。前后端通信采用jsonrpc，现需要在前端选中文件（格式未知，上传到后端，后端将其存储在mongoDB中）。

背景：

spring web可以直接使用controller接受MultipartFile对象；但是jsonrpc不能直接传输文件类型，jsonrpc是轻量级通信框架，擅长传输字符串。对于文本文件，使用jsonrpc是很容易实现上传功能的，因为可以将文本文件内容读成字符串进行传输。而对于docx、pdf、mp3等文件如果强行都成String，就会是一堆乱码。因此，大致的解决思路是，不管文件类型，统统转化成二进制，再将二进制进行Base64编码成String，传输编码后的String到后台，后台按照Base64解码还原成二进制，通过二进制构造File对象即可。

文件上传：

1、前端：

<Upload:before-upload="uploadJobFile" action="#">
    <Button>上传文件</Button>
</Upload>

前端采用iview的Upload控件包裹button，使得点击button会打开windows的文件选中窗口，选中文件并确定后，会执行before-upload属性绑定的uploadJobFile函数。

定义uploadJobFile函数时需要指定一个形参，选中的文件就会以Blob对象的形式传给uploadJobFile函数。

uploadJobFile: function (file) {    
    let reader = new FileReader();
    let total = file.size;
    if (total > 1024 * 1024 * 100) {
       this.$Message.error("上传文件必须在100MB以内！");
            return;
    }
    let jobSpecFileDataURL;
    reader.readAsDataURL(file);
    reader.onload = (() => {
    fileName = file.name;
    jobSpecFileDataURL = reader.result;
    this.JobService.uploadJobSpecFile(fileName, jobSpecFileDataURL,
       () => {
          this.$Message.success("上传成功");
       },