主页 / 问题 / 709530
Accepted
Nikolay
Asked:2020-08-23 19:04:21 +0000 UTC2020-08-23 19:04:21 +0000 UTC

快递返回 krakozyabry 而不是图片

  • 772

这是节点代码：

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

1 个回答

  1. Best Answer

    添加一个标题Content-Type: image/png，以便浏览器理解这是一个图像。

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

    UP： 这条线做了你所看到的——

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

    尝试将文件内容附加为 html（即文本）。解决问题的方法 -

    1）返回的不是文件，而是它的url，并以常规方式获取文件本身，将此url放在图像标签的src中（有很多选项可以做到这一点）

    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

相关问题