描述

通过 ajax 获取远程二进制数据流

1.示例

点击获取远程的blob 通过post下载

<template>
  <div>
    <el-button @click="onClick">点击获取远程的blob</el-button>
    <el-button @click="onClick2">通过post下载</el-button>
  </div>
</template>

<script>
import { getHttpBlob } from 'sf-utils2'
const url = 'https://info.compassedu.hk/ad/225/1637553399694.png?imageView2/3/q/100|imageslim'
export default {
  methods: {
    async onClick() {
      const blob = await getHttpBlob(url)
      alert('获取远程blob成功，去查看一下控制输出吧')
      console.log('打印一下', blob)
    },

    async onClick2() {
      const blob = await getHttpBlob(url, { method: 'POST', data: {} })
      alert('通过POST获取远程blob成功，去查看一下控制输出吧')
      console.log('打印一下', blob)
    }
  }
}
</script>

显示代码 复制代码 复制代码

2.入参说明

参数	说明	类型	是否必填	默认值
url	http 链接地址	String	是
options	选项	object	否	{}

2.1 options 入参说明

参数	说明	类型	是否必填	默认值
method	请求方式，可选值：GET、POST、DELETE、PUT	String	是	GET
headers	请求头	object 、undefined	否	undefined
data	请求实体	object、undefined	否	undefined

3.源码

源码，点开查看 👈

import isPlainObject from '@/base/isPlainObject'

/**
 * ajax根据http链接地址 获取远程blob
 * @param {string} url
 * @param {{method?: string, data: object, headers: object }} option
 * @returns {Promise<unknown>}
 */
function getHttpBlob(url, option = {}) {
  const defaultOpts = {
    method: 'GET',
    data: undefined,
    headers: undefined,
    ...option
  }
  return new Promise((resolve, reject) => {
    const xhr = new XMLHttpRequest()
    xhr.open(defaultOpts.method?.toUpperCase?.(), url, true)
    xhr.responseType = 'blob'
    // xhr.setRequestHeader('Content-Type', 'application/json')
    if (isPlainObject(defaultOpts.header)) {
      Object.entries(defaultOpts.header).forEach(([k, v]) => {
        xhr.setRequestHeader(k, v)
      })
    }
    xhr.send(JSON.stringify(option.data))
    xhr.onload = () => {
      if (xhr.status === 200) {
        resolve(xhr.response)
      } else {
        reject(xhr)
      }
    }
  })
}