Img src="blob:http://localhost... 不起作用 - createObjectURL 或 readAsDataURL | Firebase | Vue.js

Question

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

Cart.vue

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

Cart.vue mount()

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？还有网址？

然而：

...所以我尝试将 mounted() 更改为

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.headers，我会看到

'内容类型'：'图像/jpeg'， “内容长度”：“31476”，

所以在服务器上我得到了一张图片..我用return response.data发送它

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",
        size: "300",
        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",
    size: "300",
    format: "png",
    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)

Answer 1

您正在接收一个 utf8 编码的文本，二进制响应中的一些字节已被损坏。

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

  ...
  responseType: "blob"
}

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