el-upload上传成功后回显src为id

### 解决 `el-upload` 组件上传成功后返回 ID 并设置图片路径显示 为了实现 `el-upload` 上传成功后将返回的 ID 转化为图片路径并进行回显，可以按照如下方法操作： 在模板部分定义 `el-upload` 和用于展示图片的元素。当文件上传成功时，通过事件处理函数获取服务器响应中的 ID 或 URL，并将其绑定到图像源属性。 #### HTML 模板结构 ```html <template> <div> <!-- 展示已上传成功的图片 --> <el-image v-if="imageUrl" :src="imageUrl" fit="contain" style="max-width: 50%; max-height: 100px;" /> <!-- 如果还没有上传，则显示默认图标和按钮 --> <i v-else class="el-icon-upload"></i> <!-- 文件上传控件 --> <el-button v-if="!imageUrl" size="mini" type="primary">点击上传图片</el-button> <!-- 实际使用的 el-upload 控件隐藏起来 --> <el-upload ref="uploadRef" action="/your/upload/api/endpoint" :headers="{'Authorization': 'Bearer '+ token}" :data="{ customData: 'value' }" :show-file-list="false" :on-success="handleUploadSuccess"> </el-upload> </div> </template> ``` #### JavaScript 方法逻辑 ```javascript <script setup> import { ref } from "vue"; const imageUrl = ref(null); // 存储最终要显示的图片URL const uploadRef = ref(); // 获取el-upload实例引用 // 处理上传成功的回调函数 function handleUploadSuccess(response, file) { const fileId = response.data.id; // 假设服务端返回了一个相对路径或者可以直接拼接成绝对路径的形式 let basePath = "https://example.com/images/"; imageUrl.value = `${basePath}${fileId}.jpg`; console.log('Image uploaded successfully:', imageUrl.value); } </script> ``` 上述代码片段展示了如何利用 Vue.js 的组合 API 来管理状态以及监听上传完成后的动作[^1]。这里的关键在于 `handleUploadSuccess()` 函数，在此函数内部可以根据实际接口文档解析来自服务器的成功响应数据，提取出所需的资源标识符（即这里的 `id`），并通过预定义的基础地址加上该标识符构建完整的访问链接赋给 `imageUrl` 变量来更新视图上的图片位置[^2]。