BLOB对象的上传与下载，前端JS、后台node.js

1：背景

react编项目的时候遇到一个需求，实现作品的保存与下载编辑功能：将网页上的blob对象上传到服务器，以文件的形式保存；下载服务器的作品到网页上进行编辑，读取文件内容并发送到前端。

当前只记录实现的流程，blob对象具体的解释见文章底部的参考链接

 

2：blob上传

2.1：前端操作：上传

使用jquery的ajax提交文件上传

var fd = new FormData();
fd.append('filetitle', filetitle);//文件名：string
fd.append('filedata', filedata);//文件内容：blob
$.ajax({
    type: 'POST',
    url: "/api/saveProject",
    data: fd,
    processData: false,
    contentType: false
}).done(function (data) {
    //data: 服务器返回的数据
    //TODO ......
});

其中关键参数：

1、FormData：这里利用FormData对象来异步上传文件，对象放入的上传数据为键值对。

2、processData：默认为 true ，通过data选项传进来的数据，如果是一个对象，会处理转化成成一个查询字符串，以配合默认内容类型“application/x-www-form-urlencoded”。如果要发送DOM树信息或者其他不希望转换的信息，则设置为 false 。

3、contentType：默认“application/x-www-form-urlencoded”，发送信息至服务器时的内容编码类型，默认值适合大多数的情况下。如果明确传递了一个content-type给$.ajax()，那么他必定会发送服务器（即时没有数据要发送）。当前例子中，修改其值为 false 是为了避免jquery对数据进行操作，从而失去分界符，导致服务器不能正常解析文件。

 

2.2：后台接收保存并修改文件名

//uploadDir：设置保存文件的路径
var uploadDir = path.normalize(__dirname + '/' + "../userProject")

router.post('/', function (req, res) {
    // { filetitle, filedata }
    var form = new formidable.IncomingForm();
    form.uploadDir = uploadDir;
    form.parse(req, function (err, fields, files) {
        if (err) {
            res.json({ "result": '-1', "msg": '保存失败' })
            return
        }
        var oldpath = files.filedata.path;
        var newpath = oldpath + fields.filetitle.split('.')[1];
        //newpath：用于修改文件名，因为默认保存的文件是没有后缀的
        //未修改文件名时的例子：upload_7bd3302059acb15419974e2907b099fd

        fs.rename(oldpath, newpath, (err) => {
            //改变上传文件的存放位置和文件名
            if (err) {
                res.json({ "result": '-2', "msg": '保存失败' })
                return
            }
            res.json({ "result": '0', "msg": '保存成功' })
        })
    });
    form.on('error', function (err) {
        console.log('upload error:', err)
        res.json({ "result": '-3', "msg": '保存失败' })
    });
})

form.parse(req, [callback])：该方法会转换请求中所包含的表单数据，callback包含所有字段域和文件信息，如：

//fields：包含所有字段域
{
    id: '1',
    filetitle: '我的作品.zip',
    data2: 'data2',
    data3: 'data3',
    ...
}

//files：包含所有文件信息
{ 
    filedata: File {
        domain: null,
        _events: {},
        _eventsCount: 0,
        _maxListeners: undefined,
        size: 42881,
        path: 'D:\\userProject\\upload_0732f2fc1b664d6cd6dec224f407f31f',
        name: 'blob',
        type: 'application/zip',
        hash: null,
        lastModifiedDate: 2019-01-09T03:27:20.090Z,
        _writeStream: WriteStream {
            _writableState: [Object],
            writable: false,
            domain: null,
            _events: {},
            _eventsCount: 0,
            _maxListeners: undefined,
            path: 'D:\\userProject\\upload_0732f2fc1b664d6cd6dec224f407f31f',
            fd: null,
            flags: 'w',
            mode: 438,
            start: undefined,
            autoClose: true,
            pos: undefined,
            bytesWritten: 42881,
            closed: true
        }
    },
    filedata2: File{...},
    filedata3: File{...},
    ...
}

 

3：blob下载

3.1：后台发送

根据上传时候所保存的文件路径filepath，读取文件内容并转换为base64格式的内容，然后再发送到前端

router.get('/', function (req, res, next) {
    //读取指定文件名内容并转换为base64
    let data = fs.readFileSync(filepath)
    data = new Buffer(data).toString('base64')

    res.json({
        "filedata": {
            'base64': data,
            'title': filetitle
        }
    });
});

3.2：前端接收

$.get('/api/getProject', function (data) {
    //把base64转成Unit8Array
    //js提供了window.atob(base64)的方式对base64进行解码
    //再通过charCodeAt()的方式转成Uint类型
    var bytes = window.atob(data.filedata.base64),
    n = bytes.length,
    u8arr = new Uint8Array(n);
    while (n--) {
        u8arr[n] = bytes.charCodeAt(n);
    }

    var myFile = new Blob([u8arr], { type: 'application/zip' })
    //myFile 就是前端接收的文件对象
    //TODO 对文件对象的操作：读取/使用/下载/...
})

 

4：结尾

本文仅仅记录的片面的使用代码，可以拿来急用。

参考：Blob对象

抽空详细看看Blob对象的具体属性与应用，深入理解不出错。

扩展阅读：[HTML5]Blob对象、Blob|MDN