使用socketio-file-upload上传文件报错：SocketIOFileUpload未定义

错误原因 #

Uncaught ReferenceError: SocketIOFileUpload is not defined 是因为客户端未正确引入socketio-file-upload的前端库，导致浏览器找不到该构造函数。

修复方案 #

1. 引入前端库文件 #

有两种方式可以引入：

• CDN引入：在HTML文件的自定义脚本之前添加以下代码：

  <script src="https://cdn.jsdelivr.net/npm/socketio-file-upload@1.0.6/dist/socketio-file-upload.min.js"></script>
  

  版本号可根据需求调整，需与服务端安装的版本保持兼容。

• 本地引入：
  先通过npm安装依赖：

  npm install socketio-file-upload
  

  找到node_modules/socketio-file-upload/dist/socketio-file-upload.min.js文件，复制到项目静态资源目录，再在HTML中引入：

  <script src="/静态资源目录路径/socketio-file-upload.min.js"></script>
  

2. 修正按钮绑定代码 #

原代码中按钮点击事件直接绑定uploader对象是错误的，需改为函数形式，示例：

document.getElementById("file_button").addEventListener("click", () => {
  // 触发文件选择框的点击，间接触发上传
  document.getElementById("fileUpload").click();
}, false);

3. 确认服务端配置 #

确保服务端已正确配置socketio-file-upload，示例代码：

const SocketIOFileUpload = require('socketio-file-upload');
const io = require('socket.io')(yourServer);

io.on('connection', (socket) => {
  const uploader = new SocketIOFileUpload();
  uploader.dir = './uploads'; // 设置文件保存目录
  uploader.listen(socket);
});

内容的提问来源于stack exchange，提问作者Komati Joshna