Как отобразить картинку на клиенте из сервера express js с помощью ajax

Я в этом деле не опытна, и не знаю как решить данную проблему. У меня есть код, на клиенте:

 <input type="file" name="avatar" id="upl">
 <button class="submit">send</button>
 <img id="img" src="" width="40px"/>

 <script>
 $(".submit").click(function(){
    
    var file_data = $('#upl').prop('files')[0];
    var form_data = new FormData();
    form_data.append('file', file_data);

    $.ajax({
        type: 'POST',
        url: 'http://192.168.0.15:3000/data',
        dataType: 'json',
        cache: false,
        contentType: false,
        processData: false,
        data: form_data,
        success: function(data) {}
     });
  });
 </script>

на Сервере :

var fileupload = require("express-fileupload");
app.use(fileupload());

app.post('/data', async(req, res)=>{
    let image = req.files.file;
    await image.mv('./img/' + image.name); //сохраняет картинку в файле img
});

Если вкратце, то на клиенте есть input с типом file в который загружается выбранная пользователем картинка, она отправляется с помощью ajax на сервер, он принимает запрос и сохраняет отправленную картинку к себе в папку. Только проблема в том, что я не знаю как отправить картинку назад на клиент, взяв её из той же папки где мы ее сохранили - ./img и отобразить с помощью тега img. Это нужно сделать с помощью ajax, так как это приложение Cordova и сервер к которому оно обращается, расположен отдельно.


Ответы (1 шт):

Автор решения: Katya Sinovskaya

Я решила что буду загружать картинку прямиком из папки img, которая находится на сервере:

<img id="img" src="http://192.168.0.15:3000/img/image.png"/>

Так же нужно создать новый каталог, общедоступный:

app.use('/img', express.static('./img'));

Теперь всё работает.)

→ Ссылка