如何在el-upload里调用后端j接口上传文件
时间: 2024-10-29 19:15:42 浏览: 5
在Element UI 的 `el-upload` 组件中,你可以通过设置 `action` 属性来指定文件上传的 URL,即后端的接口地址。同时,你需要配置好 `onSuccess` 或者 `onUploadFinish` 回调函数,以便在上传成功后发送请求到后端。
以下是一个基本的例子:
```html
<template>
<el-upload
action="你的后端文件上传接口URL"
:on-success="handleSuccess"
:auto-upload="true"
>
<el-button>点击选择文件</el-button>
<div slot="tip" class="el-upload__tip">只能上传jpg/png文件</div>
</el-upload>
</template>
<script>
export default {
methods: {
handleSuccess(response, file) {
// 在这里可以利用axios或者其他HTTP库向后端发送POST请求
this.$axios.post('/api/file/upload', { file }, {}).then((res) => {
console.log('上传成功:', res);
}).catch((error) => {
console.error('上传失败:', error);
});
}
}
}
</script>
```
在这个例子中,`handleSuccess` 函数会在文件上传完成后被触发,然后你可以根据需要将文件信息和响应数据一起发送给后端。
阅读全文