如何用axios拿到后端处理后的图片路径
时间: 2024-03-02 21:49:44 浏览: 80
假设后端接口返回的数据格式为JSON,包含一个键值对`url`表示处理后的图片路径,那么可以通过以下代码使用axios拿到后端处理后的图片路径:
```javascript
axios.post('/api/upload-image', formData)
.then(response => {
const imageUrl = response.data.url;
console.log('处理后的图片路径:', imageUrl);
// 在这里可以将imageUrl赋值给前端的变量,或者在页面中显示图片
})
.catch(error => {
console.error('上传图片失败:', error);
});
```
其中,`/api/upload-image`是后端处理图片的接口地址,`formData`是包含上传图片的表单数据的对象。在成功获取到后端返回的数据后,可以从`response.data`中获取到`url`键对应的值,即处理后的图片路径。在这里可以将图片路径赋值给前端的变量,或者在页面中显示图片。
需要注意的是,在使用axios发送POST请求时,需要将`Content-Type`设置为`multipart/form-data`,以支持上传文件。可以通过以下代码设置请求头:
```javascript
const formData = new FormData();
formData.append('image', file);
axios.post('/api/upload-image', formData, {
headers: {
'Content-Type': 'multipart/form-data'
}
})
```
阅读全文