在使用的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={
{/* 房屋图像 */}
<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):
请问是写错了代码导致的吗?正确的代码是什么?
由于对后端不熟悉,因此希望先从前端的代码找原因,请指正代码有没有写得不对的地方,请展示代码举例说明,谢谢。
虽然我不太懂react,但是你这是请求出现错误,和代码结构应该没关系,你可以看看Network面板,后端返回什么错误信息