react，本地开发，引入antd mobileV5.22里的Image-uploader上传图片，并通过Form组件提交至数据库，报错500 (Internal Server Error)

[ken428965]

已写的代码：

const Basic = () => {
    const navigate = useNavigate()
    const [tempSlides, setTempSlides] = useState([
      // {
      //   url: ''
      // }
    ])
    let houseImg
    const addHouse = () => {
      if (tempSlides.length > 0) {
        const form = new FormData()
        tempSlides.map(item => {
          console.log('位置1',item)
          return (
          form.append('file', item.url))})
          console.log('位置2',form.get('file'))
        API.post('/houses/image', form, {
          headers: {
            'Content-Type': 'multipart/form-data'
          }
        }).then(res => {
          console.log('位置3',res)
          houseImg = res.data.body.join('|')
          console.log('位置4',houseImg)
        })
      }
      API.post('/user/houses', {
        houseImg
      }).then(res=>{
        console.log('位置5',houseImg)
      if (res && res.data.status === 200) {
        Toast.show({
          icon: 'loading',
          content: '发布成功'
        })
        navigate('/rent')
      } else {
        Toast.show({
          icon: 'loading',
          content: '服务器偷懒了，请稍后再试~'
        })
      }
    })
    }
    function mockUpload(file) {
      console.log('位置6',file)
      return {
        url: URL.createObjectURL(file)
      }
    }
    return (
      <Form layout='horizontal' onFinish={addHouse} footer={
        <div>
          <Button block type='submit' color='success' size='middle'>
            提交
          </Button>
        </div>
        }
      >
        <List header='房屋图像'>
            <Form.Item>
            <ImageUploader
                value={tempSlides}
                onChange={setTempSlides}
                multiple={true}
                upload={mockUpload}
              />
    </Form.Item>
          </List>
    </Form>
    )
}

目前效果如下，在图片上传界面可以看到能成功拿到图片
当点击提交按钮后，位置3、4、5打印不出结果来，图片地址前多了blob:，报错显示500 (Internal Server Error)
能成功获取图片数据，但提交后会报错。请问是写错了代码导致的吗？请问正确的代码是什么？
由于对后端不熟悉，因此希望先从前端的代码找原因，请指正代码有没有写得不对的地方，请展示代码举例说明，谢谢。

[miracles1919]

建议：

1. 如果你要用 Form，先看一遍 Form 的文档，看看 demo 里 onFinish 是怎么用的
2. 看一遍 ImageUploader 的文档，看看 upload 方法是什么，你这里为什么要用 mockUpload
3. 如果你想判断后端代码是否是正确的，可以用最简单的 html + js 去验证 （减少框架层面的心智负担）

[ken428965]

感谢分享~
1、onFinish是表单验证后触发，例子提供了一个弹窗的代码，需要传values进去。请问您的意思是说以上代码里的onFinish没有传values进去，是吗？
2、因为基础用法里使用了mockUpload，因此参照基础用法而没有考虑太多。
3、抱歉，我对于判断后端代码是否正确的问题没有任何概念，您提到的可以用最简单的 html + js 去验证，请问可否简单展示代码举例说明？