Jak wyświetlić we front-endzie stream gridfs-stream?

0

Serwer wysyła zdjecie do klienta:

   gfs.files.find({ metadata : {clientId : req.body.id}}).toArray(
        (err, files) => {
            if (err) throw err;
            if (files) {
                const readStream = gfs.createReadStream(files[0].filename); 
                res.set('Content-Type', files[0].contentType)
                readStream.pipe(res);
            }  
        })  

Uzywam vue js oraz axios na front-endzie:

visitAxios.post('http://do/mojego/end/pointu', User )
            .then(res => {
                console.log(res.data); /// pokazuje duuuuzo dziwnych znaczkow, chyba tekstowa reprezentacja pliku
                // i co dalej????
            }).catch( err => console.error(err));

Czy ktoś móglby proszę podpowiedziec jak podpiąć res.data do html?
Probowalem to zapisac do:

 data(){ 
return { imageFile: ''
}} 

a potem w template:

<img :src="imageFile">

Niestety, bezskutecznie (wyświetla sie tylko znaczek uszkodzonego pliku)

Postman zwraca zdjecie bez problemu oraz widze je w Chrome

0

A nie możesz po ludzku zwrócić uri do zapisanego pliku?

Innym sposobem na wyświetlenie pliku jest użycie base64.

0
Desu napisał(a):

A nie możesz po ludzku zwrócić uri do zapisanego pliku?

Popraw mnie, jeśli się mylę, ale za wyświetlanie strony jest odpowiedzialny Vuejs (SPA) , a kazda odpowiedz z serwera przechwytuje axios

Z liknku, który przesłałeś wynika, że base64 wymaga kodowania, stad próbowałem użyć btoa() po uzyskaniu odpowiedzi z serwera

axios.post('http://moja domena/dalej/end/point', idUzytkownikaBazy )
            .then(res => {  
                this.encodedData = window.btoa(res.data); })  // encode a "string" of binary data
            .catch( err => console.error(err));

Wyglada na to, że idę w złym kierunku

 Failed to execute 'btoa' on 'Window': The string to be encoded contains characters outside of the Latin1 range.

Probowalem przelozyc odpowiedź z serwera na base64 string, ale dostaje tylko ikonę uszkodzonego pliku graficznego:

  axios.post('http://moja domena/dalej/end/point', idUzytkownikaBazy)
            .then(res => {
       
                const reader =  new FileReader();
                let blob = new Blob([res.data], {type: "image/png;charset=utf-8"});
                reader.readAsDataURL(blob);  // encode a string  
                reader.onload = function() {
                    const img = new Image();
                    img.src = reader.result;
                    document.getElementById('imgContainer').appendChild(img);
                };
            })

Proszę o każdą podpowiedź

1 użytkowników online, w tym zalogowanych: 0, gości: 1