先上效果图:

 上传后:

 页面:

<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 个月前
Logo

旨在为数千万中国开发者提供一个无缝且高效的云端环境,以支持学习、使用和贡献开源项目。

更多推荐