vue3中element-plus Upload上传文件
element-plus
element-plus/element-plus: Element Plus 是一个基于 Vue 3 的组件库,提供了丰富且易于使用的 UI 组件,用于快速搭建企业级桌面和移动端的前端应用。
项目地址:https://gitcode.com/gh_mirrors/el/element-plus
免费下载资源
·
先上效果图:
上传后:
页面:
<el-upload :file-list="fileList" class="upload-demo" action="接口"
multiple v-model="ruleForms.upload" accept=".pdf" :before-upload="changeFiles"
:on-change="handleChanges">
<el-button type="primary">选择文件</el-button>
<template #tip>
<div class="el-upload__tip">
仅允许上传一个文件,仅限pdf格式
</div>
</template>
</el-upload>
我这里做个限制,仅限上传一个pdf文件,如果不需要可以去掉,更多api请参考官方upload上传官方文档
js部分:
const fileList = ref<UploadUserFile[]>([]);
const handleChange = (file, fileList) => {
console.log(file, fileList);
ruleForm.upload = fileList
//限制文件数量,此处设置限制1条
if (fileList.length > 1) {
fileList.splice(0, 1);
}
};
const changeFile = (file, fileList) => {
console.log('file', file, fileList);
if (file.type !== 'application/pdf') {
ElMessage.error('只能上传pdf格式的文件');//限制文件类型
return false;
} else {
let param = new FormData();
param.append('file', file);
console.log(param);
axios({
method: 'POST',
url: '上传接口',
data: param
}).then((response) => {
console.log(response); //查看接口返回的数据
}, function (response) {
console.log("错误信息:" + response)
});
}
};
完结,撒花~
GitHub 加速计划 / el / element-plus
23.88 K
15.38 K
下载
element-plus/element-plus: Element Plus 是一个基于 Vue 3 的组件库,提供了丰富且易于使用的 UI 组件,用于快速搭建企业级桌面和移动端的前端应用。
最近提交(Master分支:1 个月前 )
c1863f50
2 个月前
b55163fd
2 个月前
更多推荐
已为社区贡献3条内容
所有评论(0)