使用浏览器本地下载FastDFS文件服务器中文件的实现

小鱼儿 2022-12-25 11:50 128阅读 0赞

**前言：**

在使用FastDFS作为文件服务器时，我们肯定遇到过文件下载问题，当下载地址与FastDFS属与同一台服务器时，下载文件很容易实现，但是当下载地址与FastDFS不属于同一台服务器时，需要通过浏览器来辅助进行下载到本地。

**1.后台示例接口代码：**

public ResponseEntity<byte[]> downloadFile(@RequestParam("id") Integer id ) { 
    
            //根据id查找附件信息
            MessageAttachment messageAttachment = attachmentService.getById(id);
    
            // http://192.168.23.222:7099/group1/M00/00/02/wKgX3l8-F9KABdUlAAP5BN0hxz4168.pdf
            String s = messageAttachment.getFileUrl();
            //以“/”切割4次
            String[] ss = s.split("/", 5);
    
            //根据fastdfs上传组别以及资源名称得到下载字节数组 ss[3]:group1 ss[4]:M00/00/02/wKgX3l8-F9KABdUlAAP5BN0hxz4168.pdf 
            //目的是得到字节数组
            byte[] fileBuff = FastDFSClient.downloadFile(ss[3], ss[4]);
    
            // 设置下载信息头文件
            String downloadName = messageAttachment.getOriginalName();
            String contentType = "application/octet-stream";
            return ResponseEntity.ok()
                    .contentType(MediaType.parseMediaType(contentType))
                    .header(HttpHeaders.CONTENT_DISPOSITION, "attachment; filename=\"" + downloadName + "\"")
                    .body(fileBuff);
        }

**2.vue调用示例代码：**

<el-button class="mail-btn" @click="downloadFile(messageInfo.id)">下载</el-button>
    
         //下载邮件附件文件
          downloadFile(row) {
              let params = {
                  id: this.messageInfo.fileId,
              };
              api.downloadFile(params).then((respond) => {
                  if (respond.status === 200) {
                  let respondData = respond.data;
                  var blob = new Blob([respondData], {
                      type: "application/octet-stream",
                  });
                  var link = document.createElement("a");
                  link.download = this.messageInfo.fileName;//下载文件名
                  link.href = window.URL.createObjectURL(blob);
                  document.body.appendChild(link);
                  link.click();
                  window.URL.revokeObjectURL(link.href);
                  }
              });
          },

**3.实现效果：**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDAwOTQ0Nw_size_16_color_FFFFFF_t_70]  
![在这里插入图片描述][20201201173542128.png]

若对fastdfs有疑问的可以参照我的另外一篇博客：[SpringBoot整合FastDFS实现文件的上传与下载（详解+扩展）][SpringBoot_FastDFS]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDAwOTQ0Nw_size_16_color_FFFFFF_t_70]: /images/20221120/f69b8972c58f453c88160f9ca557c99a.png
[20201201173542128.png]: /images/20221120/1ddb19bca65d4a34b1a46e69a794fe19.png
[SpringBoot_FastDFS]: https://blog.csdn.net/weixin_44009447/article/details/108202818