Img src= " blob:http: / / localhost... не работает - ни с createObjectURL, ни с readAsDataURL | Firebase | Vue.js


Img src= " blob:http: / / localhost... не работает - ни с createObjectURL, ни с readAsDataURL | Firebase | Vue.js

04.10.2020 11:46:52 Просмотров 60 Источник

Я думаю, что теперь я перепробовал все и прочитал каждый вопрос по этому вопросу, но все еще не могу заставить его работать..

Корзину.Вью

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

Корзину.Вью установленный()

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;
      })

Функции опорного пункта

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 логов консоли в установленный() крюк - большой двоичный объект и адрес - я вам: enter image description here

Хорошо выглядишь? Кажется, там есть капля? А URL?

однако:

enter image description here

... ооочень я попробовал изменить 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-адреса: enter image description here

Но все равно никакого образа..

Поэтому я попробовал еще кое-что, что нашел, читая весь интернет.. переход от вызываемой функции к функции onRequest и т. д.. Когда я делаю точно такой же запрос с почтальоном, я получаю в ответ прекрасный QR-код..

Если я регистрирую response. headers в функциях firebase, которые я вижу

'тип содержимого': 'изображение/jpeg', 'контент-длина': '31476',

Итак, на сервере я получаю изображение.. который я посылаю с return response.data

ответ.:

����JFIF ИМЕЮТ��С

$' .",#(7),01444'9=82<.342��с

2!!22222222222222222222222222222222222222222222222222�,,"��

и так далее..

И вот тут-то я и нахожусь ... я начинаю ... расстраиваться.

Кто - нибудь здесь видит, что я делаю не так??

EDIT 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 используйте request (почему-то, но это работает.. понятия не имею почему, но пока решает проблему, хотя мне было бы любопытно, почему, и я предпочитаю, чтобы Аксиос запросил)

работает

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);
});

не работает

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;
      })
0
У вопроса есть решение - Посмотреть?

Ответы - Img src= " blob:http: / / localhost... не работает - ни с createObjectURL, ни с readAsDataURL | Firebase | Vue.js / Img src="blob:http://localhost... doesn't work - neither with createObjectURL or readAsDataURL | Firebase | Vue.js

Является ответом!
Kaiido

05.10.2020 02:57:23

Вы получаете кодированный utf8 текст, некоторые байты из двоичного ответа были искажены.

При выполнении вашего запроса добавьте дополнительный

  ...
  responseType: "blob"
}

в соответствии с вашим запросом axios это гарантирует, что двоичные данные не будут считываться как текст, а сохранятся правильно.
Кроме того, теперь вам не нужно создавать Blob самостоятельно, он уже один в response.data.

Помочь в развитии проекта:
Закрыть X