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

在使用的react版本如下：

img


已写的代码：

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数据格式如下，需要将图片地址按要求拼接起来，用 | 分隔开：

img

于是上传了三张图片：

img

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

img

chrome浏览器报错404：

img

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

img

img

img

请问如何修改图片地址才能符合接口所需的数据格式？
由于本人对后端不熟悉，因此希望先从前端的代码处理，请指正代码有没有写得不对的地方，请展示代码举例说明，谢谢。

首先，是流程设计问题：

  1. 获取到本地图片之后，后端需要提供一个图片上传接口（此接口你的提问+截图并未提及，需要找后端出），你作为前端是需要将图片上传给后台的。
  2. 后端（Java？PHP？Go？）收到你上传的图片之后，一般是会借助第三方存储服务，比如阿里/腾讯云oss，将图片存起来
  3. 做完存储之后，后端才会将图片地址返回给你。最后一步才是用后端给的URL填充这个houseImg参数

不过也有解决办法，那就是将图片转为base64字符串填充到houseImg参数传给后台
只不过后台的数据库（MySQL？Oracle？）就沦为了一个图片存储服务了，非常影响数据库查询效率，也不是常规做法！
如果后端执意这么做，没得说！我一般是会怼他的一顿的，如果他不听，交给老大处理。
如果连你们老大也赞成base64这种方式，那么就参考一下blob转base64的方法吧：

    function blobToBase64(blob, callback) {
      const fileReader = new FileReader();
      fileReader.onload = (e) => {
        callback(e.target.result);
      };
      fileReader.readAsDataURL(blob);
    }

题外话，你们老大也赞成这种方式的话，说明你们这个项目根本不重要，性能优化可有可无，尽快代码码完收工！

觉得有用请采纳，谢谢！
点赞关注我，带你了解更多前端知识！