回显接口返回的图片文件，blob转成url

葱头的故事

于 2023-12-05 15:34:24 发布

阅读量399

点赞数

分类专栏： js 文章标签： js

本文链接：https://blog.youkuaiyun.com/weixin_43993121/article/details/134808943

版权

js 专栏收录该内容

12 篇文章

订阅专栏

本文介绍了如何通过API从服务器获取Blob类型的文件，并利用URL.createObjectURL将其转换为URL格式，以便在前端显示。主要涉及了`previewFile`接口和处理blob文件的方法`getImgFile`。

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

	// Api
	  import { previewFile } from '@/api/files'

	// methods
      const getFile = async (photoId) => {
        return previewFile(photoId)
      }

接口文件
responseType是blob

/**
 * @param fileId
 */
export function previewFile(fileId) {
  return request({
    url: `/api/v1/pri/files/preview/${fileId}`,
    method: 'get',
    responseType: 'blob',
  })
}

需要将blob文件转换成url显示

      const getImgFile = async (fileId) => {
        try {
          const url = await getFile(fileId)
          let u = URL.createObjectURL(url)
          state.coverImgUrl = u
        } catch (e) {
          console.log(e)
        }
      }