如何以 HTML / Javascript 上传 .mp3 文件并发送到 Java 后端

Question

我们正在尝试从用 HTML / Javascript 编写的 JSP 前端上传歌曲 (.mp3) 文件。我们需要使用 websockets 上传到我们的 Java 后端。有没有人对我们如何做这件事有任何建议？

目前我们正在对我们的 JSP 文件做这样的事情：

    <h1>Please Choose a Song file</h1>
    <form name = "JSONUploadForm">
        <input type = "file" name="file" accept = ".mp3"/> <br/>
        <input type = "button" value = "Click to upload!" name = "button" onClick = "submitSong();"/>
    </form>

然后我们有我们的javascript函数submitSong()

function submitSong(){
    var songStuffs = document.getElementById("file");
    console.log(songStuffs); --> we get "null" here
    sendMessage(songStuffs);
    alert("song sent");
}


function sendMessage(val, string) {
    socket.send(string);
    return false;
}

另外，这是我们连接到服务器的功能。但是，这可以正常工作。

function connectToServer() {
    socket = new 
    WebSocket("ws://localhost:8080/Project/socket");
    socket.onopen = function(event) {
    console.log("connected!");
}

您还可以看到我们的服务器端（.java 文件）：

@OnMessage
public void onMessage(String message, Session session) throws IOException, EncodeException {
        FileWriter fw = new FileWriter(new File(songName + ".mp3"));
        fw.write(song);

        BufferedReader fr = new BufferedReader(new FileReader(songName + ".mp3"));
        String data = fr.readLine();

        System.out.println("Song: " + data); --> Here we get "song: null"
}

任何建议将不胜感激！

Answer 1

在你的代码中你有一个错误

"var songStuffs = document.getElementById("file");"

您的文件输入没有 id。 这将起作用 "var songStuffs = document.querySelector("[name=file]");"

我更喜欢使用 querySelector，因为它很灵活，工作方式与 jquery 查询选择器完全一样）））

上传文件不需要任何表格。 请阅读这篇文章https://www.html5rocks.com/en/tutorials/websockets/basics/， 这对你很有用（在页面上搜索单词“blob”）

HTML

<input id="file" type = "file" name="file" accept = ".mp3"/>

代码

var fileInput = document.querySelector("#file");
fileInput.addEventListener("change",function(){
   connection.send(fileInput.files[0]);
}); 

如果您需要发送文件和字段，您有 3 个变体

1. 创建 JSON {"field1":"value1","field2":"value1", “文件”：“base64”}
2. 手动创建表单数据并解析表单数据 带有一些网络表单内容的服务器（例如 https://stackoverflow.com/a/47279216/5138198)
3. 先发送JSON 数据，其次发送文件

Answer 2

试试这个，如果你必须上传文件，你应该在表单中添加 enctype。

<form enctype="multipart/form-data">
      <input type = "file" name="file" id="song" accept = ".mp3"/>
</form>

更新：

您可以简单地使用WebSocketFileTransfer 插件来发送您的文件。该插件有助于实现许多功能，例如身份验证、进度状态、文件/blob 兼容性。

var songStuffs = document.getElementById("song").files[0];
var transfer = new WebSocketFileTransfer({
    url: 'ws://ip:port/path/to/upload_web_socket_server',
    file: songStuffs,
    progress: function(event) {
        // Update the progress bar
    },
    success: function(event) {
        // Do something
    }
  });

transfer.start();