javascript - img中的blob链接怎么识别MIME类型?

问题描述：

<img src="blob:http://local.xxxx.test.com:8000/475de81c-4d41-40a3-b3fe-3d8ed1967673">

比如这个img资源,我想知道这个src的资源的MIME类型该怎么获取

第 1 个答案：

function getFileMimeType(url) {
  return new Promise((resolve, reject) => {
    var xhr = new XMLHttpRequest()
    xhr.open("GET", url)
    xhr.responseType = "blob"
    // 加载时处理
    xhr.onload = () => {
     // 获取返回结果
      blob = xhr.response.type
      console.log(blob);
      resolve(blob)
    }
    xhr.onerror = (e) => {
      reject(e)
    }
    // 发送
    xhr.send()
  })
}
// 换成blob链接试试
let blobUrl = 'https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/d62d4705a29549488d443045de14a4fe~tplv-k3u1fbpfcp-zoom-crop-mark:3024:3024:3024:1702.awebp'
getFileMimeType(blobUrl)
 .then((response)=>{
    console.log(response)
 })
 .catch((e)=>{
    console.error(e)
 })

由于reactive必须传递一个对象,所以在实际开发中如果只是想让某个变量实现响应式的时候回非常麻烦,所以Vue3提供了ref方法 ...