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

Jak wyświetlić we front-endzie stream gridfs-stream?
BE
  • Rejestracja:około 7 lat
  • Ostatnio:prawie 7 lat
  • Postów:4
0

Serwer wysyła zdjecie do klienta:

Kopiuj
   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:

Kopiuj
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:

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

a potem w template:

Kopiuj
<img :src="imageFile">

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

Postman zwraca zdjecie bez problemu oraz widze je w Chrome

edytowany 4x, ostatnio: besthost
DE
  • Rejestracja:ponad 9 lat
  • Ostatnio:11 miesięcy
  • Postów:1788
0

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

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

BE
  • Rejestracja:około 7 lat
  • Ostatnio:prawie 7 lat
  • Postów:4
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

Kopiuj
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

Kopiuj
 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:

Kopiuj
  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ź

edytowany 2x, ostatnio: besthost

Zarejestruj się i dołącz do największej społeczności programistów w Polsce.

Otrzymaj wsparcie, dziel się wiedzą i rozwijaj swoje umiejętności z najlepszymi.