以下是一个简单的例子，演示如何在 Vue.js 中使用 Element Plus 的 Upload 上传组件：
首先，确保你已经引入了 Element Plus 库。你可以通过以下方式之一来引入：
1. 使用 npm 安装：
npm install element-plus --save
然后在你的项目中使用：
import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import 'element-plus/lib/theme-chalk/index.css'
const app = createApp(App)
app.use(ElementPlus)
app.mount('#app')
2. 直接在 HTML 中引入：
<!-- 在你的 HTML 文件中引入 Element Plus 的 CSS 文件 -->
<link rel="stylesheet" href="path/to/element-plus/theme-chalk/index.css">
<!-- 在你的 HTML 文件中引入 Element Plus 的 JS 文件 -->
<script src="path/to/element-plus/index.js"></script>
然后，在你的 Vue 组件中使用 Upload 上传组件：
<template>
<div>
<el-upload
action="https://jsonplaceholder.typicode.com/posts/"
:headers="{ Authorization: 'Bearer ' + token }"
:on-success="handleSuccess"
:on-error="handleError"
:before-upload="beforeUpload"
:file-list="fileList"
multiple
:limit="3"
:show-file-list="false"
>
<el-button type="primary" icon="el-icon-upload">点击上传</el-button>
<div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
</el-upload>
</div>
</template>
<script>
export default {
data() {
return {
fileList: [],
token: 'your_token'
};
},
methods: {
handleSuccess(response, file, fileList) {
console.log('上传成功', response, file, fileList);
},
handleError(err, file, fileList) {
console.log('上传失败', err, file, fileList);
},
beforeUpload(file) {
const isJPG = file.type === 'image/jpeg' || file.type === 'image/png';
if (!isJPG) {
this.$message.error('只能上传jpg/png文件');
}
const isLt500KB = file.size / 1024 < 500;
if (!isLt500KB) {
this.$message.error('文件大小不能超过500KB');
}
return isJPG && isLt500KB;
}
}
}
</script>
在上述例子中，action 属性指定了上传文件的地址，headers 属性可以设置请求头，on-success 和 on-error 分别是上传成功和上传失败的回调，before-upload 是在上传之前的验证回调，file-list 是用于双向绑定已上传文件列表，multiple 表示是否支持多选文件，limit 是限制文件数量，show-file-list 表示是否显示文件列表。
转载请注明出处：http://www.zyzy.cn/article/detail/5543/ElementPlus