vue-ele-upload-image中如何获取图片的url
时间: 2023-09-10 21:06:05 浏览: 81
在 `vue-ele-upload-image` 组件中,获取图片的 URL 可以通过以下两种方式实现:
1. 使用 `responseUrlKey` 属性
`vue-ele-upload-image` 组件支持 `responseUrlKey` 属性,该属性用于指定服务器返回的响应结果中图片 URL 所对应的键名。例如,假设服务器返回的响应结果如下:
```json
{
"success": true,
"data": {
"id": "12345",
"url": "https://example.com/images/12345.jpg"
}
}
```
则可以将 `responseUrlKey` 属性设置为 `"url"`,以便从响应结果中获取图片的 URL。例如:
```html
<vue-ele-upload-image
:action="uploadUrl"
:responseUrlKey="'url'"
@success="handleUploadSuccess"
></vue-ele-upload-image>
```
在 `handleUploadSuccess` 方法中,可以从 `response` 参数中获取服务器返回的完整的响应结果,包括图片 URL。例如:
```javascript
handleUploadSuccess(response, file, fileList) {
const imageUrl = response.url;
// ...
}
```
2. 自定义上传成功后的回调函数
`vue-ele-upload-image` 组件还支持 `success` 事件,该事件会在图片上传成功后被触发。可以在该事件的回调函数中获取图片的 URL。例如:
```html
<vue-ele-upload-image
:action="uploadUrl"
@success="handleUploadSuccess"
></vue-ele-upload-image>
```
```javascript
handleUploadSuccess(response, file, fileList) {
const imageUrl = response.data;
// ...
}
```
在回调函数中,第一个参数 `response` 是服务器返回的响应结果对象,其中可以包含图片的 URL。例如,如果服务器返回的响应结果如下:
```json
{
"success": true,
"data": {
"id": "12345",
"url": "https://example.com/images/12345.jpg"
}
}
```
则可以从 `response.data` 中获取图片的 URL。