Skip to content

前端的二进制数据处理

  • 前端可上传任意类型的文件至后端,后端使用Node操作后保存在本地,并将决定路径和文件名保存至数据库

后端处理代码

js
// 下载附件api
router.get('/recordFile', tokenAuth, (req, res) => {
    let { id } = req.query
  // Funds为mongoose文档模型
    Funds.findOne({'_id': id})
        .then((result) => {
            let fileData = fs.readFileSync(result.filePath) // 读取出来的fileData为Buffer类型的二进制数据
            res.send(fileData) // 直接发送给前端
        })
        .catch((err) => {
            res.send(err)
        })

})

前端处理代码

  • responseType:指定响应类型,arraybuffer或blob(这里两种都可以使用,原因未知,路过的大佬求告知),如果不写下载的文件会乱码。还有要注意的一个点是'文件名称',很重要,如果没有完整的文件名(包括扩展名),下载下来还需要自行添加,给download设置即可

代码如下

js
      // 处理文件下载
      downloadFile (id, fileName) {
        let url = `/api/funds/recordFile`
        this.$axios.get(url, { params: {id}, responseType: "blob"} )  // arraybuffer也可以
          .then(({data}) => {
            console.log(data)
            // params:object 可选: File对象、Blob对象、MediaSource对象。
            let contentUrl = window.URL.createObjectURL(new Blob([data])) /
            let link = document.createElement('a')
            link.style.display = 'none'
            link.href = contentUrl
            link.setAttribute('download', fileName) // 文件名称,这里很重要,如果没有完整的文件名(包括扩展名),下载下来还需要自行添加
            document.body.appendChild(link)
            link.click()
            window.URL.revokeObjectURL(contentUrl)
          })
      }