1

вот код node:

    router.post('/crop', upload.fields([{name: 'img'}]), function (req, res, next) {

    console.log('files', req.files.img);

    var path = __dirname + '/' + req.files.img[0].path;
    console.log(path)
    res.sendFile(path);

ответ от сервера в итоге приходит такого рода:

�PNG IHDR��d�4 cHRMz%������u0�:�o�_�FbKGD������� pHYs.#.#x�?v�IDATx���i�%Iv~�xD�{ߒ��UY��u�]���t��A$�M��ȱ5��q836#�FFӈ2�b�pH�� �� ���w׾We��޻K������#�}�Y[gU�m��xxx���s�s�������������?zg��.........

как правильно вывести картинку с сервера через api?

заголовки: введите сюда описание изображения

ответ сервера: введите сюда описание изображения

и как мне вывести полученные данные? что за формат? Я думал ссылка будет, которую надо будет вставить, а приходит пачка непонятных символов

вот запрос на сервер:

$('#form1').submit(function(e){
    var formData = new FormData($(this)[0]);
    $.ajax({
        type:'POST',
        url:'http://localhost:8080/crop',
        data : formData,
        contentType: false, // <-----------------
        processData: false
    }).done(function(data){
        //print response on success
        $("#status").html(data);

    }).fail(function(data) {
        $("#status").html('Error');
    });
    e.preventDefault();
});
4
  • Очень странно у вас всё выглядит. Почему протокол file://? Почему такой урл, вместо чего то вроде localhost:port/crop? Приложите код, который отправляет файл на сервер. Приведенный вами кусок кода у меня отрабатывает нормально, вижу картинку.
    – Darth
    23 авг 2017 в 12:08
  • @Darth вот запрос
    – Nikolay
    23 авг 2017 в 12:50
  • проблема тут - $("#status").html(data); вы содержимое файла пытаетесь как html запихнуть в DOM.
    – Darth
    23 авг 2017 в 13:17
  • Обновил ответ, все работает, проверял
    – Darth
    23 авг 2017 в 13:49

1 ответ 1

2

Добавьте хедер Content-Type: image/png, чтоб браузер понял что это картинка.

res.set('Content-Type', 'image/png');

UP: Вот эта строчка и делает то, что вы наблюдаете -

    $("#status").html(data);

Пытается присобачить содержимое вашего файла как html (т.е. как текст). Пути решения вашей проблемы -

1) Возвращать не файл, а его урл, и получать сам файл штатным путем, ставя этот урл в src тега image (есть масса вариантов, как именно это сделать)

2) Если вы не хотите хранить этот файл у себя на сервере, то можно, например, загнать его в base64 -

router.get('/img', (req, res) => {
    res.end(
    `<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
    <form id='form1'>
        <input type='file' />
        <button>Send</button>
    </form>
    <div id='status'></div>
    <script>
        $('#form1').submit(function(e){
            var formData = new FormData($(this)[0]);
            $.ajax({
            type:'POST',
            url:'http://localhost:8080/img',
            data : formData,
            contentType: false, // <-----------------
            processData: false
            }).done(function(data){
                img = new Image();
                img.src = data;
            $("#status").html(img);
            }).fail(function(data) {
            $("#status").html('Error');
            });
            e.preventDefault();
        });
    </script>
    `);
});

router.post('/img', (req, res) => {
    const path = __dirname + '/img.png';
    const base64Image = new Buffer(fs.readFileSync(path), 'binary').toString('base64');        
    res.end(`data:image/png;base64,${base64Image}`);
});

3) Просто рабочий вариант (только вам надо будет узнать как в jQuery сделать xhr.responseType = 'blob';)-

$('#form1').submit(function(e){
    e.preventDefault();
    var xhr = new XMLHttpRequest();
    xhr.onreadystatechange = function(){
        if (this.readyState == 4 && this.status == 200){
            var img = document.createElement('img');
            var url = window.URL || window.webkitURL;
            img.src = url.createObjectURL(this.response);
            $('#status').html(img);
        }
    }
    xhr.open('POST', '/img');
    xhr.responseType = 'blob';
    xhr.send(); 
});
2
  • добавил заголовки. У меня стоит 'image/png'..
    – Nikolay
    23 авг 2017 в 11:44
  • обновил вопрос. Добавил пару скриншотов
    – Nikolay
    23 авг 2017 в 11:45

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.