文件存储Mongo DB后前端对于文件操作的处理方式

以下是关于后端对于附件从存储服务器改为存储到Mongo DB后，前端对于一些常见需求处理方式的修改：包括文件上传下载和富文本编辑中的贴图实现。

一、文件上传（记录关于fetch中post请求Content-Type的四种类型）

• application/x-www-form-urlencoded

　　　浏览器的原生 form 表单默认提交方式，提交的数据按照 key1=val1&key2=val2 的方式进行编码，key 和 val 都进行了 URL 转码

• multipart/form-data

　　　使用表单上传文件时的请求类型，会生成了一个 boundary（边界） 用于分割不同的字段，为了避免与正文内容重复， Content-Type 会指明数据是以 mutipart/form-data 来编码和本次请求的 boundary内容。

　　  注意：关于boundary有个坑就是如果自己在文件上传的接口请求头中配置Content-Type为multipart/form-data后，请求失败，实际请求头没有产生boundary，如下：　　

　　

　　然后删除请求头相关设置（Content-type）后请求成功了，实际请求头如下：

　

• application/json

　　　服务端消息主体是序列化后的 JSON 字符串，浏览器中请求头相关信息显示如下：

• text/xml

　　　不常用，发送xml格式文件或流和webservice请求

二、实现文件下载（接口返回文件流）

　　一般后端关于附件都是直接存储在服务器中然后返回前端一个资源url，现后端采用将附件存储在Mongo DB中，从而与前端的交互都改为了文件流的形式

　　接口返回文件流格式如下:

　　

　　接下来就是前端的处理了，在React项目中可以先引入downloadjs插件实现附件下载，插件安装可参考：https://www.npmjs.com/package/downloadjs

//先在组件文件中引入downloadjs
import download from 'downloadjs' 

//组件中附件下载相关方法
downloadFileByFileName (fileName) {
　　let url = `/issueservice/downloadFileByFileName?fileName=${fileName}`;
    return fetch(url, {
   　　mode: "no-cors",
      method: 'POST'
    }).then(function(resp) {
      return resp.blob();
    }).then(function(blob) {
      download(blob,fileName,"text/csv");  // downloadjs控件方法的使用
    });
}

 三、实现富文本中贴图（img显示base64格式数据图片）

　　React项目中富文本控件为BraftEditor，关于富文本中贴图的常见需求，以前采用的方式是:

1. 贴图请求文件上传接口上传到服务器中　　
2. 接口返回资源在服务器中路径url
3. 富文本控件生成的Img的src中引入上面返回的url，从而实现富文本内容可以展示在浏览器

     现因为文件存储方式的变更，前端处理方式如下：

    // 富文本编辑插入图片的回调
   handleUpLoad = param => {
        let reader = new FileReader();
        reader.readAsDataURL(param.file); 
        reader.onload = function() {
            param.success({url: reader.result})
        }
    };

 

 采用以上方法后，实际Img标签中src引入的内容参考如下：