el-upload回显图片 基地址
时间: 2023-11-02 17:57:03 浏览: 122
上传图片,返回图片地址
4星 · 用户满意度95%
el-upload组件可以用于上传图片,并且可以设置基地址来显示已上传的图片。你可以通过设置`action`属性来指定上传的接口地址,然后在上传成功后,将服务器返回的图片地址与基地址拼接起来作为已上传图片的显示路径。
以下是一个示例代码:
```vue
<template>
<el-upload
class="upload-demo"
action="/api/upload"
:on-success="handleUploadSuccess"
>
<el-button size="small" type="primary">点击上传</el-button>
</el-upload>
</template>
<script>
export default {
methods: {
handleUploadSuccess(response, file, fileList) {
// 服务器返回的图片地址
const imageUrl = response.imageUrl;
// 基地址
const baseUrl = 'http://example.com/';
// 拼接显示路径
const displayUrl = baseUrl + imageUrl;
console.log('已上传图片的显示路径:', displayUrl);
}
}
}
</script>
```
在这个示例中,`action`属性设置为`/api/upload`,表示上传图片的接口地址。在`handleUploadSuccess`方法中,将服务器返回的`imageUrl`与基地址`baseUrl`拼接起来,得到最终的显示路径`displayUrl`。
请注意,示例中的接口地址和基地址仅作参考,实际使用时需要根据自己的项目情况进行设置。另外,也可以根据具体需求对上传成功后的处理进行修改。
阅读全文