最近有在折腾后端node ，于是想到以前在对文件进行上传和下载时遇到一些问题，感觉不是很好处理，说到根本原因，还是对基础的原理不是很清晰。

于是，现在有了node 环境，打算使用最原始的方式进行文件上传和下载。也就是说前端使用XHR对象进行文件上传和下载，不使用其他ajax封装插件，直接使用浏览器原生对象处理，调试下浏览器会对文件上传和下载处理到哪种程度，而自己又需要写哪些代码。

后端使用express 框架搭建后端服务，处理文件上传时，使用了 multer 插件处理文件上传。

图片上传：

• 前端使用 avatar 作为 key，上传文件。后端使用 avatar 字段接收文件。
• 以下代码很简单，需要在html中创建一个input 元素，id 为file（html代码没有展示）。
• 使用formData 对象处理需要提交的文件。
• ⚠️使用POST 的方式上传文件，这个需要注意，如果使用url 传参方式，例如：使用GET 方式后，会导致url 太长，而浏览器又对url长度进行了限制，所以会导致请求错误。

前端代码：

let fileDom = document.getElementById('file'); // 为input 标签Dom元素
fileDom.onchange = function(e) {
    let file = e.target.files[0];
    let formData = new FormData();
    formData.append('avatar', file);
    let xhr = new XMLHttpRequest();
    
    xhr.open('POST', 'http://localhost:3000/web/uploader');
    xhr.onload = function() {
        console.log(xhr);
    }
    xhr.send(formData);
}

后端代码：

• 引入 multer 插件。
• avatar 对应前端 key。
• multer({ dest: 'uploads/'}) 为配置文件储存路径。

const multer  = require('multer');

var upload = multer({ dest: 'uploads/'}) // 文件储存路径
router.post('/uploader', upload.single('avatar'), function(req, res, next) {
    let file = req.file;
    console.log(file)
    res.json({message: "ok"});
});

上图中 dest: 'uploads/' 为文件储存路径，上传文件后，可在uploads文件夹中查看已经上传的文件，如下截图：

图6.jpg

图片下载代码

前端代码

• 使用get 方式请求下载图片。
• 97d53267175a75dd758a84329950fe25 为文件唯一id（可能为文件的MD5）， 需要在上传文件时，将文件Id 和业务id 保存在数据库。为了方便测试，直接在上传的文件中，复制了一个文件的文件名作为参数进行文件下载。

let loadimgDom = document.getElementById('loadimg');
        loadimgDom.onclick = function() {
            let xhr = new XMLHttpRequest();
            xhr.open('GET', 'http://localhost:3000/web/loadimg/97d53267175a75dd758a84329950fe25');
            xhr.onload = function(a, b) {
                console.log(xhr)
            }
            xhr.send();
        }

后端处理文件下载如下：

router.get('/loadimg/97d53267175a75dd758a84329950fe25', function(req, res, next) {
    let imgid = req.param('imgid');
    let file = path.join(__dirname,'../../../uploads/' + '97d53267175a75dd758a84329950fe25');
    console.log(file);
    res.download(file); 
});

前端打印返回结果如下图1：返回内容不是二进制，无法处理文件

图1.jpg

解决步骤: 添加 xhr.responseType = "blob";

let loadimgDom = document.getElementById('loadimg');
        loadimgDom.onclick = function() {
            let xhr = new XMLHttpRequest();
            xhr.open('GET', 'http://localhost:3000/web/loadimg/97d53267175a75dd758a84329950fe25');
            xhr.onload = function(a, b) {
                console.log(xhr)
            }
            xhr.responseType = "blob";
            xhr.setRequestHeader('token',token)
            xhr.send();
        }

前端打印返回结果如下图2：返回内容是二进制，可以继续处理二进制下载文件。

图2.jpg

下载二进制文件，图片

前端代码如， 后端代码不做修改；

let loadimgDom = document.getElementById('loadimg');
        loadimgDom.onclick = function() {
            let xhr = new XMLHttpRequest();
            xhr.open('GET', 'http://localhost:3000/web/loadimg/97d53267175a75dd758a84329950fe25');
            xhr.onload = function() {
                console.log(xhr)
                let blob = this.response; //使用response作为返回，而非responseText
                let reader = new FileReader();
                reader.readAsDataURL(blob); // 转换为base64，可以直接放入a标签href
                reader.onload = function(e) {
                  // 转换完成，创建一个a标签用于下载
                  let a = document.createElement("a");
                  a.download = "图1.jpg";
                  a.href = e.target.result;
                  a.click();
                };
            }
            xhr.responseType = "blob";
            xhr.setRequestHeader('token',token)
            xhr.send();
        }

可下载文件，并且可以打开文件

二进制图片预览，直接将二进制连接放置到img src标签中。src 的url 和使用上面文件下载的url 一样。

<img src="http://localhost:3000/web/loadimg/97d53267175a75dd758a84329950fe25" alt="">

图4.jpg

其实下图可以看出， img 标签中，src 所对应的链接，使用的就就是http GET方法.

图7.jpg

参考

ajax 请求二进制流 图片

使用Javascript下载二进制文件