element上傳文件對格式限制的處理方案

更新時間：2024年02月06日 11:52:18 作者：巨蟹座守護騎士

最近做項目遇到這樣的需求,需要上傳的文件格式必須是pdf格式,方便我們查看,本文給大家分享element上傳文件對格式限制的處理方案,感興趣的朋友一起看看吧

需求：上傳的文件格式必須是pdf格式，方便查看

規(guī)定多種格式用逗號隔開

使用這個屬性可以規(guī)定上傳文件格式，但是有bug

可以手動改變顯示的文件類型，還是可以傳其他文件類型

所以需要在上傳的時候限制上傳的文件格式

上傳組件

<el-upload 
 :file-list="contract_file"
 :http-request="UploadImage"
 :before-upload="before_upload"
 :on-remove="handleRemove" 
 :on-preview="handlePictureCardPreview"
 accept=".pdf">
 <el-button type="primary">上傳</el-button>
</el-upload>

         // 上傳前
        before_upload(file) {
            // 截取上傳文件的后綴名
            let fileType = file.name.substring(file.name.lastIndexOf(".") + 1);
            console.log(fileType);
            // 判斷文件名的類型，允許多種就判斷多個
            if (fileType == 'pdf') {
                console.log(file);
            } else {
                ElMessage.error("文件類型必須為pdf格式")
                // 返回false 就不會執(zhí)行上傳操作了
                return false
            }
            // 判斷多個
            // if (!["pdf", "doc", "docx"].includes(fileType)) {
            //    ElMessage.error("文件類型必須為pdf格式");
            //    return false;
            // }
        },
        // 上傳
        async UploadImage(param: any) {
            let formData = new FormData()
            formData.append('file', param.file)
            // 調用自己的后端接口上傳文件到服務器
            const res: any = await getUpload(formData)
            if (res.code === 1) {
                ElMessage.success(res.msg)
                this.contract_file.push({
                    name: res.data.name,
                    url: res.data.url
                })
            } else {
                ElMessage.error(res.msg)
            }
        },
        // 點擊上傳的文件可預覽文件
        handlePictureCardPreview(file: any) {
            let { contract_file } = this
            contract_file.map(item => {
                if (item.name === file.name) {
                    window.open(item.url)
                }
            })
        },
        // 刪除上傳的文件
        handleRemove(flie: any, fileList: any) {
            this.contract_file = fileList
        },