vue项目upload上传文件验证文件类型

需求:点击上传附件  上传同时就要验证是否为doc文件 

同理 可验证xls,md,html等文件

    <el-form-item label="附件:" v-show="taskfileshow" prop="file"> 
                <el-button type="primary"  plain @click="clickupload()"  :disabled="updateinfo">上传附件</el-button>
                <input type="file" name="" class="btnUploadID"  @change="changeuploaID($event)" ref="fileRef" style="display:none" id="input-file-ID" v-if="clearShow"  >
                <label   class="lbfilename"  :title="information.fileName">{ {information.fileName}}</label>
     </el-form-item>

            checkFile:function(name){ 
                var reg = /^.*\.(?:doc)$/i;//文件名可以带空格
                if (!reg.test(name)) {//校验不通过
                    this.$message({
                        message:'請上傳doc格式的文件!',
                        type: 'error'
                    });
                    return false;
                }else{
                    return true;
                }
            },

          clickupload(){ 
                document.querySelector('.btnUploadID').click();
            },
            changeuploaID(e){   
                this.deviceArray = [];
                let deviceFile = e.target.files;   
                for(let i=0;i<deviceFile.length;i++){
                    if (this.checkFile(deviceFile[i].name)) {
                        this.information.fileNamelist.push(deviceFile[i].name);
                        this.information.fileName = deviceFile[i].name;
                        this.information.file =  deviceFile[i]; 
                    } else {
                        this.$refs.fileRef.value = ''
                    }

                      
                }  
            }, 

下面为验证xls

猜你喜欢

转载自blog.csdn.net/qq_42177730/article/details/114641757