nodejs上传文件给服务器 nodejs下载服务器文件转发给

2021-12-29  本文已影响0人  Fancy_饭稀

需求:(nodejs做中间层 接收web前端上传和下载再转发给服务器端)
需求1,web前端上传文件到node层,node层再传递给服务器端。
需求2,web前端请求到node层,node请求服务器端下载文件流,再传给web前端。

需求1的核心代码:

web前端ajax上传文件

var formData = new FormData();
formData.append('file',file对象);
$.ajax({
   processData: false,
   contentType: false,
   type: "POST",
   url:'/a/b/c',
   data: formData,
   success: function (body) { 

   }
})

nodejs层 router里需要的模块有fs multer request

var request = require("request");
var fs = require("fs");
var multer = require('multer');
//设置一下node层接收到web端的文件流的存储位置
//node接文件后的存储配置
var storage = multer.diskStorage({
  // 设置上传后文件路径,uploads文件夹会自动创建。
  destination: function (req, file, cb) {
      cb(null, path.resolve(__dirname, '..') + '/tempUpload');
  },
  // 给上传文件重命名,获取添加后缀名
  filename: function (req, file, cb) {
      console.log(">>>>>>>>>>>>>>>" + JSON.stringify(file));
      var fileFormat = (file.originalname).split(".");
      cb(null, file.fieldname + '-' + Date.now() + "." + fileFormat[fileFormat.length - 1]);
  }
});
var upload = multer({storage: storage});
//接收web前端流文件
//这里的upload就是上面的upload对象
router.all('/a/b/c', upload.array('file', 1), function (req, res, next) {
  //拿到本地的文件路径
  var tmpFile = req.files[0];
  //创建流文件
  const file = fs.createReadStream(tmpFile.path);
  //上传文件
  var option = {
    method: "POST",
    url: '真实的服务器上的上传文件地址',
    headers: {
      'Content-Type': 'multipart/form-data'
    },
    formData: {'file':file}
  };
  request(option, function (error, response, body) {
    res(response, body);
  });
});

需求2的核心代码

本人尝试用jq的ajax去下载流文件,但是我们公司的后端返回的数据一直都是Text格式,所以改为用原生ajax来写

web前端ajax下载流文件

    var xhr = new XMLHttpRequest();//定义一个XMLHttpRequest对象
    xhr.open('post', '/a/b/d', true);
    xhr.setRequestHeader("Content-type","application/json;charset=UTF-8");//为了传body参数给node层
    xhr.responseType = 'blob';//设置ajax的响应类型为blob
    xhr.onload = function ()//当请求完成,响应就绪进入
    {
        if (this.status == 200)//当响应状态码为200时进入
        {
            //这里的this是整个response对象 包括流数据,包括响应头等
             console.log(this)
            //流转成文件
             convertRes2Blob(this)
        }
    }; 
    xhr.send(JSON.stringify({'a':'b'}));//附带参数发送请求 这里传过去的是json字符串

直接附上response转blob代码 下面代码是从公司以前代码粘贴过来的 笔者也没仔细读过 就是把获取响应头的地方做了ajax原生的适当改动

function convertRes2Blob (xhr) {
   let fileName = 'xxxxx'
    // 提取文件名
    const contentDisposition = xhr.getResponseHeader('content-disposition');
    if (contentDisposition) { 
      if (contentDisposition.includes('fileName')) { 
        fileName = contentDisposition.match(/fileName=(.*)/)[1]
      }else if(contentDisposition.includes('filename')) { 
        fileName = contentDisposition.match(/fileName=(.*)/)[1]
      }
    }
    // 将二进制流转为blob
    const blob = xhr.response
    if (typeof window.navigator.msSaveBlob !== 'undefined') {
      // 兼容IE,window.navigator.msSaveBlob:以本地方式保存文件
      window.navigator.msSaveBlob(blob, decodeURI(fileName))
    } else {
      // 创建新的URL并指向File对象或者Blob对象的地址
      const blobURL = URL.createObjectURL(blob)
      // 创建a标签,用于跳转至下载链接
      const tempLink = document.createElement('a')
      tempLink.style.display = 'none'
      tempLink.href = blobURL
      tempLink.setAttribute('download', decodeURI(fileName))
      // 兼容:某些浏览器不支持HTML5的download属性
      if (typeof tempLink.download === 'undefined') {
        tempLink.setAttribute('target', '_blank')
      }
      // 挂载a标签
      document.body.appendChild(tempLink)
      tempLink.click()
      document.body.removeChild(tempLink)
      // 释放blob URL地址
      window.URL.revokeObjectURL(blobURL)
    }   
 }

node层

router.all('/a/b/d', function (req, res, next) {
  //req.body  传递过来的参数
  var option = {
    method: 'post',
    url: '真实服务器下载地址',
    headers: {
      'Content-Type': 'application/octet-stream'
    }
  };
  request(option).on('response', function (response) { 
    this.pipe(res)//啥都不处理,直接返回给web前端了
  });
});

tip:
本人web不咋会,特别是nodejs,哪里有表述不行的请多见谅,因为代码是对业务进行抽离的所以有可能有拼写有误的。
另外如果有需求是ajax上传后,服务端根据情况返回的可能是流也可能是文本的可以看下一篇。

上一篇 下一篇

猜你喜欢

热点阅读