先上效果圖：

?上傳后：

?頁(yè)面：

<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">
                  僅允許上傳一個(gè)文件，僅限pdf格式
             </div>
           </template>
</el-upload>

我這里做個(gè)限制，僅限上傳一個(gè)pdf文件，如果不需要可以去掉，更多api請(qǐng)參考官方upload上傳官方文檔

js部分：

const fileList = ref<UploadUserFile[]>([]);
const handleChange = (file, fileList) => {
    console.log(file, fileList);
    ruleForm.upload = fileList

    //限制文件數(shù)量，此處設(shè)置限制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格式的文件');//限制文件類(lèi)型
        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); //查看接口返回的數(shù)據(jù)
        }, function (response) {
            console.log("錯(cuò)誤信息：" + response)
        });
    }
};

完結(jié)，撒花~文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-645814.html

到了這里，關(guān)于vue3中element-plus Upload上傳文件的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！