ajax上传文件 响应体可能是流文件/文本的处理

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

是上一篇的延伸
需求:web前端上传文件给node中间层,node再上传给java服务端,服务端根据传过去的文件内容解析文件里的内容是否正确,如果正确返回普通Json数据,如果不正确将不正确的文本内容重新放到一个文件里再将该文件流返回给web前端。

思路:web端不管服务端给返回的是流还是文本,通通都用流的方式接。然后根据响应头的Content-Type不同做不同处理。

(重要代码都做了注释)

核心代码

前端ajax:
    var formData = new FormData();
    formData.append('file',file对象);
    var xhr = new XMLHttpRequest();
    xhr.open('post', '/a/b/u', true); 
    //设置ajax的响应类型为blob 就是不管服务端返回的是啥 都用流的形式来接了
    xhr.responseType = 'blob';
    xhr.onload = function () {
      //这里的this是整个response对象 包括流数据,包括响应头等
      var xhr = this;
      const resonseType = xhr.getResponseHeader('Content-Type');
      // console.log('响应ContentType;;;;'+resonseType)
      ////流文件的处理
      if (resonseType.includes('application/octet-stream')) {
         //流转成文件 convertRes2Blob函数上一篇文章里有
         convertRes2Blob(xhr)
      } else { //文本的处理
        //将流读出来
        var reader = new FileReader();
        reader.onload = function(event){
          //普通json数据
          var content = reader.result;
          //注意这个content是json字符串,如果需要获取对象里的属性等需要parse一下
          var obj = JSON.parse(content);
        };
        reader.readAsText(xhr.response);
      }
    };
    xhr.send(formData);
node层 与上一篇基本相同
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/u', 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).on('response', function (response) { 
    //这行代码的大致意思是node层接收到的流没做任何处理通过pipe管道直接返回给了web前端
    this.pipe(res)
  });
});
上一篇下一篇

猜你喜欢

热点阅读