文章/答案/技术大牛

发布

社区首页 >问答首页 >我使用websocket与spring boot和STOMP客户端进行聊天时发送图像

问我使用websocket与spring boot和STOMP客户端进行聊天时发送图像
EN

Stack Overflow用户

提问于 2021-06-28 16:07:53

回答 1查看 118关注 0票数 0

大家好，我正在使用websocket通过stomp客户端发送图像，我遇到了这个错误：

    Uncaught TypeError: Cannot read property 'files' of null
    at sendMyImage (app.js:46)
    at HTMLButtonElement.<anonymous> (app.js:68)
    at HTMLButtonElement.dispatch (jquery.js:5201)
    at HTMLButtonElement.q.handle (jquery.js:5009)
sendMyImage @ app.js:46
(anonymous) @ app.js:68
dispatch @ jquery.js:5201
q.handle @ jquery.js:5009

这是我在index.html中使用的代码

<html>
<head>
    <title>chat app</title>
    <link href="/webjars/bootstrap/css/bootstrap.min.css" rel="stylesheet">
    <link href="/main.css" rel="stylesheet">
    <script src="/webjars/jquery/jquery.min.js"></script>
    <script src="/webjars/sockjs-client/sockjs.min.js"></script>
    <script src="/webjars/stomp-websocket/stomp.min.js"></script>
    <script src="/app.js"></script>
</head>
<body>
<div id="main-content" class="container">
    <div class="row">
        <div class="col-md-6">
            <form class="form-inline">
                <div class="form-group">
                    <label for="connect">WebSocket connection:</label>
                    <button id="connect" class="btn btn-default" type="submit">Connect</button>
                    <button id="disconnect" class="btn btn-default" type="submit" disabled="disabled">Disconnect
                    </button>
                </div>
            </form>
        </div>
        <div class="col-md-6">
            <form class="form-inline">
                <div class="form-group">
                    <label for="participantId">ParticipantId :</label>
                    <input type="number" id="participantId" class="form-control" placeholder="Your id here...">
                </div>
                <div class="form-group">
                    <label for="id">Content :</label>
                    <input type="text" id="content" class="form-control" placeholder="Your message content here...">
                </div>
                <button id="send" class="btn btn-default" type="submit">Send</button>
            </form>
        </div>
        <div class="col-md-6">
            <form class="form-inline">
                <div class="form-group">
                    <label>Select an image and hit send:</label>
                    <input type="file" id="file" accept="image/*"/>
 
                    <button id="sendImage" class="btn btn-default" type="submit">Send Image</button>
                </div>
            </form>
        </div>
    </div>
    <div class="row">
        <div class="col-md-12">
            <table id="conversation" class="table table-striped">
                <thead>
                <tr>
                    <th>chatmessages</th>
                </tr>
                </thead>
                <tbody id="chatmessages">
                </tbody>
            </table>
        </div>
    </div>
</div>
</body>

</html>

这是我的app.js代码：

var stompClient = null;

const messageWindow = document.getElementById("messages");
const fileInput = document.getElementById("file");
const sendImageButton = document.getElementById("sendImage");


function setConnected(connected) {
    $("#connect").prop("disabled", connected);
    $("#disconnect").prop("disabled", !connected);
    if (connected) {
        $("#conversation").show();
    }
    else {
        $("#conversation").hide();
    }
    $("#chatmessages").html("");
}

function connect() {
    var socket = new SockJS('/ws');
    socket.binaryType = "arraybuffer";//heere
    stompClient = Stomp.over(socket);
    stompClient.connect({}, function (frame) {
        setConnected(true);
        console.log('Connected: ' + frame);
        stompClient.subscribe('/user/chatmessages', function (chatmessage) {
            showChatMessage(JSON.parse(chatmessage.body));
        });
    });
}

function disconnect() {
    if (stompClient !== null) {
        stompClient.disconnect();
    }
    setConnected(false);
    console.log("Disconnected");
}

function sendParticipantIdAndContent() {
    stompClient.send("/app/chat", {}, JSON.stringify({'participantId': $("#participantId").val(),'content': $("#content").val()}));
}

function sendMyImage() {
    let file = fileInput.files[0];
    sendMessage(file);
    fileInput.value = null;
}

function showChatMessage(message) {
    $("#chatmessages").append("<tr><td>" + message.message + "</td></tr>");
}


function addImageToWindow(image) {
    let url = URL.createObjectURL(new Blob([image]));
    messageWindow.innerHTML += `<img src="${url}"/>`
}

$(function () {
    $("form").on('submit', function (e) {
        e.preventDefault();
    });
    $( "#connect" ).click(function() { connect(); });
    $( "#disconnect" ).click(function() { disconnect(); });
    $( "#send" ).click(function() { sendParticipantIdAndContent(); });
    $( "#sendImage" ).click(function() { sendMyImage(); });
});

我真的很想知道问题出在哪里，因为我不明白为什么他会把文件读为空。请告诉我我哪里搞砸了，谢谢你

spring

websocket

stomp

回答 1

Stack Overflow用户

发布于 2021-06-30 19:23:15

这个问题是因为javascript中的fileInput被读取为空。

你可以试试这样的东西

<input type="file" id="file" >

并像这样访问内容

let file = document.getElementById("file").files[0];

这里的问题肯定与stomp、spring或websocket无关。

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/68159741

复制

相似问题

问我使用websocket与spring boot和STOMP客户端进行聊天时发送图像
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问我使用websocket与spring boot和STOMP客户端进行聊天时发送图像EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问我使用websocket与spring boot和STOMP客户端进行聊天时发送图像
EN