将后台二进制数据转换为blob,并转换为 src="blob:http://" 链接

最新推荐文章于 2025-07-01 23:16:35 发布

原创最新推荐文章于 2025-07-01 23:16:35 发布 · 2.1w 阅读

10 ·

CC 4.0 BY-SA版权

文章标签：

#blob #node #ajax #buffer

前端学习专栏收录该内容

14 篇文章

订阅专栏

本文介绍如何将后台获取的二进制数据转换为blob对象，并进一步转化为`src="blob:http://"`的链接。通过Node.js的Express处理二进制数据，然后在前端利用Ajax进行转换操作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

后台code

使用express 搭建的后台

// 加载 express
const express = require('express')
// 加载 fs
const fs = require('fs')
// 创建 app
const app = express()
// 静态文件托管
app.use(express.static('public'))
// 主页面请求
app.get('/', function(req, res) {
  res.sendFile(__dirname + '/index.html')
})
app.post('/url', function(req, res) {
  // 读取文件
  fs.readFile(__dirname + '/public/test.mp4', function(err, data) {
    if (err) {
      console.log(err.stack)
      return
    }
    // 向前台发送二进制数据
    res.send(data)
    res.end()
  })
})
app.listen(8080, function() {
  console.log('Server is running……')
})

前台code:

'use strict'
window.onload = function (evt) {
  // 获取元素
  let video = document.querySelector('.video')
  const xhr = new XMLHttpRequest()
  xhr.open('post', '/url', true)
  // 请求类型 bufffer
  xhr.responseType = 'arraybuffer'
  xhr.onload = function () {
    if (xhr.status === 200 || xhr.status === 304) {
      // 将后台 buffer 转换为 blob
      let blob = new Blob([xhr.response], {type: 'video/*'})
      // 创建blob链接
      video.src = URL.createObjectURL(blob)
    }
  }
  xhr.send()
}