我正在尝试将图像传递到我的节点服务器,但无论我尝试什么,当我将其作为 a 传递时,有效负载始终为空,像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.logmessages
或images
我确实获得了正确的值时。我在这里缺少一些东西。
谢谢
首先,当您需要将
append
多个图像添加到 时formData
,您不应传递数组images
,而应将它们单独附加,例如"image" + index
作为键和image
作为值。其次,在该
postSendMessage
方法中,第二个参数是formData
,需要将其原样传递给axios
post请求。