vue3中element-plus Upload上传文件代码示例
作者：拿铁喝布丁
这篇文章主要介绍了vue3中element-plus Upload上传文件的相关资料,在时间开发中上传文件是经常遇到的一个需求,文中通过代码介绍的非常详细,需要的朋友可以参考下
先上效果图：
上传后：
页面：
<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)
});
}
};完结，撒花~
总结
到此这篇关于vue3中element-plus Upload上传文件的文章就介绍到这了,更多相关vue3 element-plus Upload上传文件内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！