react，图片信息post到本地数据库，图片地址与接口所需的数据格式Blob不匹配？

在使用的react版本如下：

const Basic = () => {
  const navigate = useNavigate()
  const [tempSlides, setTempSlides] = useState([])
  let houseImg
  const addHouse = () => {
    if (tempSlides.length > 0) {
      const form = new FormData()
      houseImg = tempSlides.map(item => item.url).join('|')
      form.append('houseImg', houseImg)

        // 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)
        // })
    }

    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 mockUpload(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>
    )
}

接口所需的houseImg数据格式如下，需要将图片地址按要求拼接起来，用 | 分隔开：

于是上传了三张图片：

打印结果显示，每一张图片地址都是完整的地址，且用 | 分隔开：

chrome浏览器报错404：

浏览器network里，Request URL里显示了默认地址与完整图片地址的嫁接：

搜索过网上关于append()的用法，()里的第二个参数的类型要为File类型，需要将现时的Bloburl转Blob
请问如何修改代码才能符合接口所需的数据格式Blob？
由于本人对后端不熟悉，因此希望先从前端的代码处理，请指正代码有没有写得不对的地方，请展示代码举例说明，谢谢。