使用socket.io

Question

我不仅尝试通过 Socket.io 单独发送文本，还尝试添加图像。这个想法是允许用户向其帖子中添加通常只包含文本的图像。 （最后给出了单独的代码。照片的布局根据上传的图像数而改变。）

应该怎么办

选择所需的图像后，将显示预览。键入消息并按Enter后，将发出消息和图像，并创建一个帖子。

正在发生的事情

代码独立运行。但是，当我尝试将其与sockets.io集成时，会出现以下错误。

  

未捕获到的TypeError：无法在“ FileReader”上执行“ readAsDataURL”：   参数1的类型不是“ blob”。

我尝试过的事情

服务器中的必需代码

clientSocket.on('post', function(data) {
  io.sockets.emit('post', data);
});

前端代码

let control = document.getElementById("file-upload");
let inputFields = document.querySelector(".input-fields");
let container = document.querySelector(".post-container");
let postInput = document.querySelector(".post-input");

/* Provide the preview */
control.addEventListener("change", function(event) {

  // When the control has changed, there are new files

  files = control.files,
    len = files.length;


  // Loop through the FileList and render image files as thumbnails.
  for (let i = 0; i < len; i++) {

    // Only process image files.
    if (!files[i].type.match('image.*')) {
      continue;
    }
    let reader = new FileReader();
    reader.onload = function(event) {

      let img = document.createElement("img");
      img.src = event.target.result;
      img.setAttribute("class", "thumbnail");
      inputFields.appendChild(img);
    };

    reader.onerror = function(event) {
      console.error("File could not be read! Code " + event.target.error.code);
    };
    // Read in the image file as a data URL.
    reader.readAsDataURL(files[i]);
  }


});


/* emit the files uploaded using the file API */

postInput.addEventListener("keyup", function(event) {
  if ((event.which === 13 || event.keyCode === 13) && postInput.value != "") {
    socket.emit('post', {
      message: postInput.value,
      files: files
    });
    postInput.value = "";
  }
});


/* Create the post */
socket.on('post', function(data) {

  let files = data.files;

  // Ensure only four images gets displayed.
  len = (data.files.length > 4) ? 4 : data.files.length;


  // Loop through the FileList and render image files as thumbnails.
  for (let i = 0; i < len; i++) {

    // Only process image files.
    if (!files[i].type.match('image.*')) {
      continue;
    }
    let reader = new FileReader();
    reader.onload = function(event) {

      let node = document.createTextNode(data.message);
      let div = document.createElement("div");
      div.appendChild(node);
      conatiner.appendChild(div);

      let img = document.createElement("img");
      img.src = event.target.result;
      img.setAttribute("class", `layout-${len}-image-${i+1}`);
      container.appendChild(img);
    };

    reader.onerror = function(event) {
      console.error("File could not be read! Code " + event.target.error.code);
    };
    // Read in the image file as a data URL.
    reader.readAsDataURL(files[i]);
  }

  if (files.length > 4) {
    let node = document.createTextNode("+ " + (data.files.length - 4));
    let div = document.createElement("div");
    div.setAttribute("class", "text");
    div.appendChild(node);
    container.appendChild(div);
  }
});

.input-fields>img {
  /* display:flex; */
  width: 100px;
  height: 50px;
}

.grid-container {
  position: relative;
  width: 400px;
  height: 400px;
  display: grid;
  grid-gap: 4px;
  grid-template-columns: auto auto auto auto;
  grid-template-rows: auto auto auto auto;
  padding: 4px;
}

.text {
  position: absolute;
  bottom: 30px;
  right: 10px;
  color: white;
  font-size: 80px;
  font-weight: 100;
  z-index: 2;
}

img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}


/* First Layout */

.layout-1-image-1 {
  grid-column: 1 / 5;
  grid-row: 1 / 5;
}


/* Second Layout */

.layout-2-image-1 {
  grid-column: 1 / 3;
  grid-row: 1 / 5;
}

.layout-2-image-2 {
  grid-column: 3 / 5;
  grid-row: 1 / 5;
}


/* Third Layout */

.layout-3-image-1 {
  grid-column: 1 / 3;
  grid-row: 1 / 5;
}

.layout-3-image-2 {
  grid-column: 3 / 5;
  grid-row: 1 / 3;
}

.layout-3-image-3 {
  grid-column: 3 / 5;
  grid-row: 3 / 5;
}


/* Forth Layout */

.layout-4-image-1 {
  grid-column: 1 / 3;
  grid-row: 1 / 3;
}

.layout-4-image-2 {
  grid-column: 3 / 5;
  grid-row: 1 / 3;
}

.layout-4-image-3 {
  grid-column: 1 / 3;
  grid-row: 3 / 5;
}

.layout-4-image-4 {
  grid-column: 3 / 5;
  grid-row: 3 / 5;
}

<input class="post-input" type="text"  placeholder="Write something...">
<input id="file-upload" type="file" multiple>
<div class="input-fields"></div>
<section class="post-container"></section>

隔离代码。

let control = document.getElementById("file-upload");
let container = document.querySelector(".grid-container");

control.addEventListener("change", function(event) {

  // When the control has changed, there are new files

  files = control.files,

    // Ensure only four images gets displayed.
    len = (files.length > 4) ? 4 : files.length;


  // Loop through the FileList and render image files as thumbnails.
  for (let i = 0; i < len; i++) {

    // Only process image files.
    if (!files[i].type.match('image.*')) {
      continue;
    }
    let reader = new FileReader();
    reader.onload = function(event) {

      let img = document.createElement("img");
      img.src = event.target.result;
      img.setAttribute("class", `layout-${len}-image-${i+1}`);
      container.appendChild(img);
    };

    reader.onerror = function(event) {
      console.error("File could not be read! Code " + event.target.error.code);
    };
    // Read in the image file as a data URL.
    reader.readAsDataURL(files[i]);
  }
  
  if (files.length > 4) {
    let node = document.createTextNode((files.length - 4) + " +");
    let div = document.createElement("div");
    div.setAttribute("class", "text");
    div.appendChild(node);
    container.appendChild(div);
  }

});

.grid-container{
  position:relative;
  width: 400px;
  height:400px;
  display: grid;
  grid-gap: 4px;
  grid-template-columns: auto auto auto auto;
  grid-template-rows: auto auto auto auto;
  padding: 4px;
}

.text{
  position:absolute;
  bottom: 30px;
  right: 10px;
  color:white;
  font-size: 80px;
  font-weight: lightest;
  z-index: 2;
}
img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
/* First Layout */
.layout-1-image-1{
  grid-column: 1 / 5;
  grid-row: 1 / 5;
}

/* Second Layout */
.layout-2-image-1{
    grid-column: 1 / 3;
    grid-row: 1 / 5;
}
.layout-2-image-2{
    grid-column: 3 / 5;
    grid-row: 1 / 5;
}

/* Third Layout */
.layout-3-image-1{
    grid-column: 1 / 3;
    grid-row: 1 / 5;
}
.layout-3-image-2{
    grid-column: 3 / 5;
    grid-row: 1 / 3;
}
.layout-3-image-3{
    grid-column: 3 / 5;
    grid-row: 3 / 5;
}

/* Forth Layout */
.layout-4-image-1{
    grid-column: 1 / 3;
    grid-row: 1 / 3;
}
.layout-4-image-2{
    grid-column: 3 / 5;
    grid-row: 1 / 3;
}
.layout-4-image-3{
    grid-column: 1 / 3;
    grid-row: 3 / 5;
}
.layout-4-image-4{
    grid-column: 3 / 5;
    grid-row: 3 / 5;
}

<input id="file-upload" type="file" multiple>
<section class="grid-container"></section>