在使用的react版本如下:
// 临时图片地址
const [tempSlides, setTempSlides] = useState([])
// 房屋图片
const [houseImg,setHouseImg] = useState('')
// 获取房屋图片:
const handleHouseImg = (files, type, index) => {
console.log(files, type, index)
setTempSlides(files)
}
const addHouse = () => {
// 上传房屋图片:
if (tempSlides.length > 0) {
// 已经有上传的图片了
const form = new FormData()
tempSlides.forEach(item => form.append('file', item.file))
API.post('/houses/image', form, {
headers: {
'Content-Type': 'multipart/form-data'
}
}).then(res => {
// houseImg = res.data.body.join('|')
setHouseImg(res.data.body.join('|'))
})
}
console.log(houseImg)
// 发布房源
API.post('/user/houses', {
houseImg
}).then(res=>{
if (res && res.data.status === 200) {
// 发布成功
Toast.show({
icon: 'loading',
content: '发布成功'
})
navigate('/rent')
} else {
Toast.show({
icon: 'loading',
content: '服务器偷懒了,请稍后再试~'
})
}
})
}
// ImageUploader组件限制图片大小
function beforeUpload(file) {
if (file.size > 2048 * 2048) {
Toast.show('请选择小于 4M 的图片')
return null
}
return file
}
return (<>
<Form layout='horizontal' onFinish={addHouse} footer={
<div className={styles.bottom}>
{/* 房屋图像 */}
<List header='房屋图像'>
<Form.Item>
<ImageUploader
value={tempSlides}
onChange={handleHouseImg}
multiple={true}
className={styles.imgpicker}
upload={mockUpload}
beforeUpload={beforeUpload}
maxCount={3}
showUpload={tempSlides.length < maxCount} onCountExceed={exceed => {
Toast.show(`最多选择 ${maxCount} 张图片,你多选了 ${exceed} 张`)}}
/>
</Form.Item>
</List>
</>
)
}
目前效果如下,在发布信息界面可以看到能成功拿到图片,并能成功打印出houseImg里的内容(houseImg是数组,内里有多张图片的地址):
然而,当点击提交按钮后,虽然能成功发布房源,但是刚才上传到选择的图片没有成功显示出来:
同时,chrome浏览器报错显示500 (Internal Server Error):
请问是写错了代码导致的吗?正确的代码是什么?请展示代码举例说明,谢谢。
这个代码是后端返回的错误,建议和后端协调一下
返回500状态码是服务器那边响应回来的,检查后端接口吧