使用 socketio-file-upload 上传图片

Question

我正在尝试使用 socketio-file-upload 上传文件，到目前为止它做得很好，选择“上传图片”按钮将文件正确上传到我喜欢的文件夹。我的问题是，任何单击“搜索文件”或“单击此处”的按钮都会上传文件，而没有给我您选择的文件的名称。我想要实现的是

• 1.- 按“上传图片”按钮
• 2.- 显示文件名
• 3.- 通过单击“单击此处”按钮将文件上传到所选文件夹 这是我正在使用的代码

main.js

//Connection to the socket library
const socket = io();

//This is some classic socket.io event listening
socket.on('data', data => {
    console.log(data);
});
//Here is our socketio-file-upload code
const uploader = new SocketIOFileUpload(socket);

//uploader.listenOnInput(document.getElementById('fileUpload'));
uploader.listenOnInput(document.getElementById('fileUpload'));


uploader.addEventListener('start', (event)=> {
    event.file.meta.extension = 'csv';
});

document.getElementById('file_button').addEventListener('click', uploader.prompt, false);

Answer 1

来自Socket.IO File Upload documentation：

instance.listenOnSubmit(submitButton, input)

和instance.listenOnInput(input) 一样，除了监听输入元素上的“更改”事件，而是监听按钮的“点击”事件。

JavaScript：

instance.listenOnSubmit(document.getElementById("my_button"), document.getElementById("file_input"));

HTML：

<label>Upload File: <input type="file" id="file_input" /></label>
<button id="my_button">Upload File</button>

试试这样的：

main.js

//Connection to the socket library
const socket = io();

//This is some classic socket.io event listening
socket.on('data', data => {
    console.log(data);
});
//Here is our socketio-file-upload code
const uploader = new SocketIOFileUpload(socket);

// When #file_button is clicked, the file in #fileUpload is uploaded.
uploader.listenOnSubmit(document.getElementById('file_button'), document.getElementById('fileUpload'));

uploader.addEventListener('start', (event)=> {
    event.file.meta.extension = 'csv';
});