欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

element上傳文件對(duì)格式限制的處理方案

 更新時(shí)間:2024年02月06日 11:52:18   作者:巨蟹座守護(hù)騎士  
最近做項(xiàng)目遇到這樣的需求,需要上傳的文件格式必須是pdf格式,方便我們查看,本文給大家分享element上傳文件對(duì)格式限制的處理方案,感興趣的朋友一起看看吧

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

規(guī)定多種格式用逗號(hào)隔開(kāi)

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

 可以手動(dòng)改變顯示的文件類型,還是可以傳其他文件類型

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

 

 上傳組件

<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);
            // 判斷文件名的類型,允許多種就判斷多個(gè)
            if (fileType == 'pdf') {
                console.log(file);
            } else {
                ElMessage.error("文件類型必須為pdf格式")
                // 返回false 就不會(huì)執(zhí)行上傳操作了
                return false
            }
            // 判斷多個(gè)
            // if (!["pdf", "doc", "docx"].includes(fileType)) {
            //    ElMessage.error("文件類型必須為pdf格式");
            //    return false;
            // }
        },
        // 上傳
        async UploadImage(param: any) {
            let formData = new FormData()
            formData.append('file', param.file)
            // 調(diào)用自己的后端接口上傳文件到服務(wù)器
            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)
            }
        },
        // 點(diǎn)擊上傳的文件可預(yù)覽文件
        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
        },

到此這篇關(guān)于element上傳文件對(duì)格式限制的處理的文章就介紹到這了,更多相關(guān)element上傳文件格式限制內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!

相關(guān)文章

  • 修改el-form-item中的label里面的字體邊距或者大小問(wèn)題

    修改el-form-item中的label里面的字體邊距或者大小問(wèn)題

    這篇文章主要介紹了修改el-form-item中的label里面的字體邊距或者大小問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2023-10-10
  • Vue腳手架的簡(jiǎn)單使用實(shí)例

    Vue腳手架的簡(jiǎn)單使用實(shí)例

    這篇文章主要介紹了Vue腳手架的簡(jiǎn)單使用實(shí)例,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
    2018-07-07
  • vue+elementUI實(shí)現(xiàn)動(dòng)態(tài)合并數(shù)據(jù)相同的單元格(可指定合并列)

    vue+elementUI實(shí)現(xiàn)動(dòng)態(tài)合并數(shù)據(jù)相同的單元格(可指定合并列)

    這篇文章主要介紹了vue+elementUI如何實(shí)現(xiàn)動(dòng)態(tài)合并數(shù)據(jù)相同的單元格,文中有詳細(xì)的代碼實(shí)例供大家參考,具有一定的參考價(jià)值,需要的朋友可以參考下
    2023-07-07
  • vue中的v-model原理,與組件自定義v-model詳解

    vue中的v-model原理,與組件自定義v-model詳解

    這篇文章主要介紹了vue中的v-model原理,與組件自定義v-model詳解,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
    2020-08-08
  • vue實(shí)現(xiàn)菜單權(quán)限控制的示例代碼

    vue實(shí)現(xiàn)菜單權(quán)限控制的示例代碼

    這篇文章主要介紹了vue實(shí)現(xiàn)菜單權(quán)限控制的示例代碼,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
    2021-03-03
  • vue打包項(xiàng)目版本號(hào)自加的操作步驟

    vue打包項(xiàng)目版本號(hào)自加的操作步驟

    項(xiàng)目每次打包后都需要改動(dòng)項(xiàng)目版本號(hào),這個(gè)改動(dòng)每次都需要在package.json中修改version,比較麻煩,到底有沒(méi)有一種打包后版本號(hào)自加的辦法,這篇文章主要介紹了vue打包項(xiàng)目版本號(hào)自加的步驟,需要的朋友可以參考下
    2022-09-09
  • element中el-table中的el-input校驗(yàn)的實(shí)現(xiàn)

    element中el-table中的el-input校驗(yàn)的實(shí)現(xiàn)

    本文主要介紹了element中el-table中的el-input校驗(yàn)的實(shí)現(xiàn),文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
    2022-08-08
  • vant的Uploader?文件上傳,圖片數(shù)據(jù)回顯問(wèn)題

    vant的Uploader?文件上傳,圖片數(shù)據(jù)回顯問(wèn)題

    這篇文章主要介紹了vant的Uploader?文件上傳,圖片數(shù)據(jù)回顯問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2022-10-10
  • Vue3+axios+Mock.js實(shí)現(xiàn)登錄功能的示例代碼

    Vue3+axios+Mock.js實(shí)現(xiàn)登錄功能的示例代碼

    本文主要介紹了Vue3+axios+Mock.js實(shí)現(xiàn)登錄功能的示例代碼,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
    2023-05-05
  • Vue中的errorHandler異常捕獲問(wèn)題

    Vue中的errorHandler異常捕獲問(wèn)題

    這篇文章主要介紹了Vue中的errorHandler異常捕獲問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2023-05-05

最新評(píng)論