使用 ElementPlus 的上传组件的示例代码,假设后端返回的数据格式为 JSON,包含两个字段:code
和 message
。其中 code
为表示上传结果的状态码,200 表示上传成功;message
为上传结果的详细说明。
<template>
<el-upload
action="/upload"
:on-success="handleSuccess"
>
<el-button slot="trigger">选择文件</el-button>
</el-upload>
</template>
<script>
export default {
methods: {
handleSuccess(response, file, fileList) {
if (response.code === 200) {
// 上传成功
this.$message.success('上传成功')
} else {
// 上传失败
this.$message.error(response.message)
// 清除上传列表中的该文件
fileList.splice(fileList.indexOf(file), 1)
}
},
},
}
</script>
在上传成功时,会弹出提示框提示上传成功;在上传失败时,会弹出提示框提示上传失败并打印后端返回的错误信息,并且在上传列表中清除该文件。