Блог

Я создаю этот компонент, который позволяет пользователю отправлять одно или несколько изображений с помощью socket io. Но у меня возникла проблема с тем, как выполнить итерацию в список файлов, который можно использовать в качестве большого двоичного объекта, а затем передать в файловый редактор для чтения.

Функция загрузки изображений

 const handleOnUploadChat = (e) =gt; {  let fileArr = Array.from(e.target.files);  setUploadImgChat(fileArr);  };  

Функция отправки сообщения

 const handleSendMessage = (e) =gt; {  e.preventDefault();   if (newMessage) {  const messageData = {  conversationId: currentConversationInfo._id,  senderId: currentAccountInfo._id,  messageText: newMessage.messageText,  };   // dispatch(registerMessage(messageData));   socket?.emit('sendMessage', {  senderId: currentAccountInfo,  receiverId: currentConversationInfo.members.find(  (id) =gt; id !== currentAccountInfo._id  ),  message: newMessage.messageText,  imagesFilename: uploadImgChat.map((file) =gt; file.name),  imagesFileType: uploadImgChat.map((file) =gt; file.type),  images: uploadImgChat.map((file) =gt; file),  });    setCurrentMessage((currentMessage) =gt; [  ...currentMessage,  { senderId: currentAccountInfo, messageText: newMessage.messageText },  ]);  }  };  

Функция получить сообщение

 socket.on('getMessage', (data) =gt; {  const blob = new Blob([data.images], { type: data.imagesFileType });  const reader = new FileReader();  reader.readAsDataURL(blob);  reader.onload = function () {  setReceiveImg(reader.result);  };   setArrivalMessage({  senderId: data.accountId,  messageText: data.message,  messageImg: receiveImg,  createdAt: Date.now(),  });  });