再vue中如何获得以下图片的url <el-form-item label="特征图片:" class="w50p" prop="fileId"> <EleUploadImage multiple :responseFn="handleResponse" :action="baseurl" :headers="headers" :fileType="['png', 'jpg', 'jpeg', 'pdf']" :isShowSuccessTip="false" v-model="images" /> </el-form-item> handleResponse(res, file, fileList) { if (res.success) { this.fileId=res.data; this.$message.success("上传成功"); return file.url; } else if (res.success === false && res.errCode === 200) { this.$message.error(res.message); } else { this.$message.error("上传失败,请稍后再试"); } },
时间: 2023-07-19 19:41:44 浏览: 152
获取网站图片URL
4星 · 用户满意度95%
在 Vue 中,你可以使用 `ref` 来获取组件实例,然后通过该实例来调用 `handleResponse` 函数并获取其返回值,从而获得上传成功的图片的 URL。
例如,在组件中给 `EleUploadImage` 添加一个 `ref` 属性:
```
<el-form-item label="特征图片:" class="w50p" prop="fileId">
<EleUploadImage
ref="uploadImage"
multiple
:responseFn="handleResponse"
:action="baseurl"
:headers="headers"
:fileType="['png', 'jpg', 'jpeg', 'pdf']"
:isShowSuccessTip="false"
v-model="images"
/>
</el-form-item>
```
然后在需要获取图片 URL 的地方,通过 `this.$refs` 来获取组件实例,并调用其 `handleResponse` 方法:
```
let uploadImage = this.$refs.uploadImage;
let url = uploadImage.handleResponse(res, file, fileList);
```
其中,`res`、`file` 和 `fileList` 是上传成功后的响应数据,需要根据具体情况进行传递。如果上传成功,`url` 就是上传成功的图片的 URL。
阅读全文