写一个elementui的上传按钮,从后端获取数据,接口方法为export function getStuInfo() { return request({ url: "admin-api/admin/getstuinfo", method: "get", }); }
时间: 2024-02-26 16:55:38 浏览: 62
好的,这里是一个基于 ElementUI 的上传按钮,可以从后端获取数据:
```
<template>
<el-upload
class="upload-demo"
action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
:on-success="handleSuccess"
:before-upload="beforeUpload"
:headers="headers"
:data="data"
:file-list="fileList"
multiple
drag
list-type="picture-card"
:auto-upload="false"
>
<i class="el-icon-plus"></i>
<div class="el-upload__text">将文件拖到此处,或<em>点击上传</em></div>
<div class="el-upload__tip" slot="tip">只能上传jpg/png文件,且不超过500kb</div>
</el-upload>
</template>
<script>
import { getStuInfo } from '@/api/admin'
export default {
data() {
return {
fileList: [],
headers: {
Authorization: 'Bearer ' + localStorage.getItem('token')
},
data: {
// 上传时需要的其他参数
}
}
},
methods: {
beforeUpload(file) {
const isJPG = file.type === 'image/jpeg' || file.type === 'image/png'
const isLt2M = file.size / 1024 / 1024 < 0.5
if (!isJPG) {
this.$message.error('上传头像图片只能是 JPG/PNG 格式!')
}
if (!isLt2M) {
this.$message.error('上传头像图片大小不能超过 500KB!')
}
return isJPG && isLt2M
},
async handleSuccess(response, file, fileList) {
const res = await getStuInfo()
console.log(res)
// 处理后端返回的数据
}
}
}
</script>
```
其中,`handleSuccess` 方法会在上传成功后调用,可以在该方法中调用后端接口获取数据。
在上述代码中,我使用了 `getStuInfo` 方法来模拟获取后端数据的过程。你可以将其中的接口地址和请求方法改为你自己的实现。
另外,需要注意的是,上传按钮的 `auto-upload` 属性设置为 `false`,表示不自动上传,只有在点击上传按钮后才会触发上传事件。
阅读全文