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

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

于是上传了三张图片：

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

chrome浏览器报错404：

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

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