如何获取MS Graph用户照片为blob URL并存储到应用数据库

解决方案 #

你生成的blob:localhost开头的URL是浏览器生成的临时本地引用，仅在当前页面会话有效，关闭页面或刷新后就会失效，确实无法直接存储到数据库做持久化使用，可按需选择以下两种方案解决：

方案1：Blob转Base64存储（适合小文件场景）

将二进制Blob直接转换为Base64字符串，可直接存入数据库，不需要额外的文件存储服务，React中实现代码如下：

import axios from 'axios'

const getBinaryFile = async () => {
  try {
    // 请求接口获取二进制数据
    const response = await axios.get('你的接口地址', {
      responseType: 'blob'
    })
    // 借助FileReader将Blob转为Base64
    const fileReader = new FileReader()
    fileReader.readAsDataURL(response.data)
    fileReader.onloadend = () => {
      const base64Content = fileReader.result
      // 此处将base64Content传给后端接口存入数据库即可
      console.log('可持久化存储的Base64内容：', base64Content)
    }
  } catch (err) {
    console.error('请求处理失败：', err)
  }
}

适用场景：单文件体积小于1MB的图标、头像、小截图等场景，实现成本最低

方案2：上传Blob到文件服务获取公网URL（适合大文件场景）

如果需要处理体积较大的文件，建议将拿到的Blob上传到自建文件存储服务或第三方云存储服务，拿到公网可访问的URL后再存入数据库，实现代码如下：

import axios from 'axios'

const getAndSaveFile = async () => {
  try {
    // 请求接口获取二进制数据
    const binaryRes = await axios.get('你的接口地址', {
      responseType: 'blob'
    })
    // 构造FormData用于上传文件
    const formData = new FormData()
    formData.append('upload_file', binaryRes.data, '自定义文件名.png')
    // 上传到你的文件存储接口
    const uploadRes = await axios.post('你的文件上传接口地址', formData, {
      headers: {
        'Content-Type': 'multipart/form-data'
      }
    })
    // 从上传返回结果中取公网URL，存入数据库即可
    const publicAccessUrl = uploadRes.data.file_url
    console.log('可持久化存储的公网URL：', publicAccessUrl)
  } catch (err) {
    console.error('处理失败：', err)
  }
}

适用场景：单文件体积大于1MB的文档、图片、视频等场景，存储和读取性能更高

内容的提问来源于stack exchange，提问作者Deepak Kothari