Img src =“ blob：http：// localhost ...不起作用-既不使用createObjectURL也不使用readAsDataURL | Firebase

如何解决Img src =“ blob：http：// localhost ...不起作用-既不使用createObjectURL也不使用readAsDataURL | Firebase | Vue.js

我想我现在已经尝试了所有方法并阅读了有关此问题的每个问题，但仍然无法使其正常工作。

购物车

<template>
<div>
<h1>CART</h1>
  <img :src="imgSrc" style="width:600px; height: 600px">
</div>
</template>

Cart.vue挂载（）

mounted(){
    const qr = firebase.functions().httpsCallable('sendPaymentRequest')
    qr()
      .then(res => {
        const blob = new Blob([res.data],{type: 'image/jpg'})
        console.log(blob);
        const url = (window.URL || window.webkitURL).createObjectURL(blob)
        console.log(url);
        this.imgSrc = url;
      })

Firebase功能

exports.sendPaymentRequest = functions.https.onCall((data,context) => {
const qr = async () => {
       try {
        const json = {
            token: "umP7Eg2HT_OUId8Mc0FHPCxhX3Hkh4qI",size: "300",format: "jpg",border: "0"
        }
        const response = await axios.post('https://mpc.getswish.net/qrg-swish/api/v1/commerce',json)
       console.log('status',response.status)
       if(response.status !== 200){throw new Error ('Error requesting QR code')}
        return response.data
    } catch (e){
        console.log('error',e)
        return e
    }
    }
    return qr();
})

在我的2个控制台中，登录了Mounted（）钩子-Blob和URL-我得到：

看起来还好吗？似乎有Blob？还有一个网址？

但是：

...所以我尝试将 mount（（））更改为

const qr = firebase.functions().httpsCallable('sendPaymentRequest')
qr()
.then(res => {
  const self = this;
  const blob = new Blob([res.data],{type: 'image/jpg'})
  const reader = new FileReader();
  reader.onloadend = function() {
    self.imgSrc = reader.result
  };
  reader.readAsDataURL(blob);
})
.catch(e => console.log(e))

这似乎也起作用，但是..不是。.现在我在图像中有了一个不错的base64编码的小字符串，而不是URL：

但是仍然没有图像。

所以我尝试了一些其他内容，这些内容是我在阅读整个Internet时发现的。从可调用函数移到onRequest函数等。当我与Postman进行完全相同的请求时，我在回应。

如果我登录的是 firebase函数中的response.header，则

'content-type'：'image / jpeg'， 'content-length'：'31476'，

因此，在服务器上，我正在获取图像..我正在用return response.data发送图像

响应数据为：

��JFIF��C

$。” “，＃（7），01444'9 = 82 <.342>
2 !! 22222222222222222222222222222222222222222222222222。,“

以此类推。

那就是我的位置。..我感到沮丧。

这里的人有没有看到我在做什么错？？

编辑1 对于将来遇到这种情况的任何人-正如@Kaiido在客户端上指出的，我必须添加

  ...
  responseType: "blob"
}

但也在服务器上，使用Firebase，您需要从以下位置移走

functions.https.onCall(async (data,context) => {

到

functions.https.onRequest(async (req,res) => {

通过以下方式在客户端上调用它：

axios({
        method: 'get',url: 'http://localhost:5001/swook-4f328/us-central1/retrieveQr',responseType: 'blob',})
        .then(async res => {
          const url = (window.URL || window.webkitURL).createObjectURL(res.data)
          this.imgSrc = url;
          
        })
        .catch(e => e)

和在服务器上而不是axios使用请求（出于某种原因，但这有效..不知道为什么，但是现在解决了问题，尽管我很好奇为什么，并且我更喜欢axios请求）

有效

const json = {
        token: "umP7Eg2HT_OUId8Mc0FHPCxhX3Hkh4qI",format: "png",border: "0"
    }
var requestSettings = {
    url: 'https://mpc.getswish.net/qrg-swish/api/v1/commerce',method: 'POST',encoding: null,json: true,'content-type': 'application/json',body: json,};

request(requestSettings,(error,response,body) => {
    res.set('Content-Type','image/png');
    res.header({"Access-Control-Allow-Origin": "*"});
    res.send(body);
});

不起作用

const json = {
    token: "umP7Eg2HT_OUId8Mc0FHPCxhX3Hkh4qI",border: "0"
}
const response =  await axios.post('https://mpc.getswish.net/qrg-swish/api/v1/commerce',json)
if(response.status !== 200){throw new Error ('Error requesting QR code')}
res.header({"Access-Control-Allow-Origin": "*"}).writeHead(200,{'Content-Type': 'image/png'}).end(response.data)
// neither this works:
// res.header({"Access-Control-Allow-Origin": "*"}).status(200).send(response.data)

解决方法

您收到的是utf8编码的文本，二进制响应中的某些字节已被弄乱。

在请求时，添加一个额外的

All

您的axios请求的选项，这将确保二进制数据不会作为文本读取，而是正确保存。
另外，现在您不需要自己构建Blob，它已经是... responseType: "blob" }中的一个。