需求：(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上传后，服务端根据情况返回的可能是流也可能是文本的可以看下一篇。
网友评论