发送时有效负载为空，当se

Question

我正在尝试将图像传递到我的节点服务器，但无论我尝试什么，当我将其作为

const formData = new FormData();

传递时，有效负载始终为空，像往常一样，我确实获得了正确的信息（除了无法翻译的图像）没有新的 FormData())，但其余部分通过有效负载发送。

这是我的API：

/// POST SEND MESSAGE  ///

export const postSendMessage = async (id, data) => {
  const headers = {
    'Content-Type': 'multipart/form-data',
    'Accept-Language': currentLang,
  }
  const body = {
    senderId: data.senderId,
    text: data.text,
    images: data.images,
  }
  try {
    const response = await axios.post(`http://localhost:3001/patient/${id}/message`, body, { headers })
    return response
  }
  catch (error) {
    console.error('error', error);
  }
  return null
};

这是前端：

const ChatMessageInput = ({ conversationId }) => {

  const userContext = useContext(AuthContext);
  const fileRef = useRef(null);

  const [message, setMessage] = useState('');
  const [images, setImages] = useState([]);

  const handleAttach = (event) => {
    const newImage = event.target.files[0];
    if (newImage && newImage.type.includes('image')) {
      setImages(prevImages => [...prevImages, newImage]);
    }
  };

  const handleChangeMessage = useCallback((event) => {
    setMessage(event.target.value);
  }, []);

  const handleSendMessage = async (event) => {
    if (event.key === 'Enter') {
      try {
        const formData = new FormData();
        formData.append('text', message);
        formData.append('images', images);
        formData.append('senderId', userContext.user.id);
        const messageSent = await API.postSendMessage(conversationId, formData);

        setMessage('');
        setImages([]);
      } catch (error) {
        console.error(error);
      }
    }
  };

  return (
    <>
      <InputBase
        value={message}
        onKeyUp={handleSendMessage}
        onChange={handleChangeMessage}
        placeholder="Type a message"
        endAdornment={
          <Stack direction="row">
            <IconButton onClick={() => fileRef.current.click()}>
              <Iconify icon="solar:gallery-add-bold" />
            </IconButton>

          </Stack>
        }
      />
      <input type="file" ref={fileRef} style={{ display: 'none' }} onChange={handleAttach} />
    </>
  );
}

据我了解，您无法 console.log formData，但是当我 console.log

messages

或

images

时，我确实得到了正确的值。 我在这里遗漏了一些东西。

谢谢你

Answer 1

首先，当你需要将多个图像

append

添加到

formData

时，你不应该传递

images

数组，而是单独附加它们，例如

"image" + index

作为键，

image

作为值.

其次，在

postSendMessage

方法中，第二个参数是

formData

，需要原样传递给

axios

post请求。

export const postSendMessage = async (id, formData) => {
  const headers = {
    'Accept-Language': currentLang, // Do not set Content-Type here
  }
  try {
    const response = await axios.post(`http://localhost:3001/patient/${id}/message`, formData, {
      headers: headers,
    });
    return response;
  }
  catch (error) {
    console.error('error', error);
  }
  return null;
};

const handleSendMessage = async (event) => {
  if (event.key === 'Enter') {
    try {
      const formData = new FormData();
      formData.append('text', message);
      formData.append('senderId', userContext.user.id);
      images.forEach((image, index) => {
        formData.append(`images[${index}]`, image);
      });
      const messageSent = await API.postSendMessage(conversationId, formData);

      setMessage('');
      setImages([]);
    } catch (error) {
      console.error(error);
    }
  }
};