el-upload如何获取上传图片到哪里的地址
时间: 2023-09-07 17:11:27 浏览: 124
el-upload 是一个基于 ElementUI 的上传组件,它可以用于上传文件和图片。当用户选择并上传文件或图片时,el-upload 组件会将文件或图片上传到指定的服务器地址,并返回上传成功后的文件或图片的地址。在上传之前,你需要设置上传的服务器地址,以及每个文件或图片上传成功后的响应信息格式。
在上传成功后,el-upload 组件会触发 `success` 事件,你可以在事件处理函数中获取上传成功后返回的文件或图片地址。例如,以下代码演示了如何设置上传服务器地址和上传成功后的响应信息格式,以及如何在上传成功后获取上传后的文件地址:
```html
<template>
<el-upload
class="upload-demo"
:action="uploadUrl"
:response-format="responseFormat"
:on-success="handleSuccess"
:file-list="fileList"
list-type="picture">
<el-button size="small" type="primary">点击上传</el-button>
</el-upload>
</template>
<script>
export default {
data() {
return {
uploadUrl: '/api/upload', // 设置上传服务器地址
responseFormat: { // 设置上传成功后的响应信息格式
success: true,
data: {
url: ''
}
},
fileList: []
}
},
methods: {
handleSuccess(response, file, fileList) {
if (response.success) {
// 上传成功,获取上传后的文件地址
const url = response.data.url
console.log('上传成功,文件地址为:', url)
} else {
// 上传失败
console.error('上传失败:', response.message)
}
}
}
}
</script>
```
在上面的代码中,`uploadUrl` 变量指定了文件上传的服务器地址,`responseFormat` 变量指定了上传成功后的响应信息格式。在 `handleSuccess` 方法中,我们可以获取上传成功后返回的文件地址并进行处理。
阅读全文