前言:在前端开发过程中，提到文件上传，一般上传的都是图片、Excel、压缩包、PDF等后缀的文件或图片，那么如果用户在不知情的情况下如果上传一个加密的Excel、PDF等文件，而且前、后端同学也没有处理这种情况，此时如果上传也可以上传，但后端这边解析文件就会解析不出来，为了杜绝这种情况发生，前端或者后端会对加密文件进行处理，那么，加密文件要怎么处理呢？请看下文~

开始开发

• 首先需要上传文件，我们想到的肯定是用组件库，现在一般都是用的element的组件库，但是因为是公司团队之前为了方便开发，将element的组件库进行二次封装，组成了常用的业务组件，我这里就用公司封装好的组件库了，这个组件库是将element进行二次封装的，所以和element没有什么区别，唯一的区别感觉就是组件名不一样，

  • 创建upload-modal.vue文件，在template标签中写上用到的上传组件，下边代码在组件库中都有解释，根据需求来写就行，我这块要自定义的传Excel文件和zip文件

    <div>
      <ep-upload
        drag
        manual
        multiple
        list-type="file-list"
        :file-list="fileList"
        name="fileList"
        accept=".xlsx, .zip, .xls"
        :http-request="importFile"
        :preview="false">
          <i class="ep-upload-dragger__icon ion-upload"></i>
          <div class="ep-upload-dragger__text">将文件拖到此处，或<em>点击上传</em></div>
       </ep-upload>
    </div>
    <div>
      <ep-button type="primary" @click="uploadFile">确定上传</ep-button>
    </div>
    

  • 接下来我们需要处理逻辑，在script的methods里边处理逻辑(vue2)

    // 自定义上传文件
    importFile(fileList) {
        if (fileList.length === 1) {
          let file = fileList[0]
          // this.$info('上传中，请稍后')
          // console.log(fileList)
          this.checkFile(file)
        } else {
          this.$pop({
            type: 'warning',
            message: '请确认文件名及文件类型是否一致'
          })
        }
      },
    // 逻辑比较复杂，抽出来单独写
    checkFile(file) {
        let fileInfo = file.name
        let fileName = fileInfo.split('.')[0]
        let fileType = fileInfo.split('.')[1]
        // 检查文件类型
        if (fileType !== 'xls' && fileType !== 'xlsx' && fileType !== 'zip') {
          this.$warn('只支持的XLS/XLSX/ZIP文件类型或确认文件名是否正确')
          return
        }
        // 检查文件名
        let fileNameSplit = fileName.split('_')
        if (fileNameSplit.length !== 3 || fileNameSplit.indexOf("") !== -1) {
          this.$warn('文件名错误')
          return
        }
       if (fileType !== 'zip') {
          // 处理excel文件
          // 检查文件内容
        let reader = new FileReader() // 读取文件内容
    
        let vm = this
        reader.onload = function (e) { // 文件读取成功时触发
          // 经过测试，发现经过wps、office加密的excel文件里都会包含`ÐÏ`这个字符
          if (reader.result.indexOf('ÐÏ') !== -1) { // 检查是否加密
            vm.$warn('暂不支持加密文件，请检查文件是否加密')
            return 
          }
          const workbook = XLSX.read(e.target.result, {type: 'binary'}); // 记得安装XLSX库并引入，我这边就不写了
          let sheet = workbook.SheetNames[0]
          let ws = XLSX.utils.sheet_to_json(workbook.Sheets[sheet]);
          if (ws.length < 1) {
            vm.$warn('文件内容为空')
             return
          }
          let info = ws[0]
          let key = [
            'test1', 'test2', 'test3'  // key里边是表头信息，因为是公司项目，我这里用test代替
          ].sort()
          let infoKey = Object.keys(info).sort()
          console.log(key, infoKey)
          if (JSON.stringify(key) !== JSON.stringify(infoKey)) {
            vm.$warn('文件表头错误或存在空字段')
          }
          vm.fileList.push(file)
          console.log(ws)
        };
        reader.readAsBinaryString(file)
       } else if (fileType === 'zip') {
    	// 处理zip文件
         this.fileList.push(file)
       }
      },
    // 上传文件
    uploadFile() {
        console.log(this.fileList)
        if (!this.fileList.length) {
            return this.$warn('请选择文件后上传')
        }
        if (this.fileList.length >= 2) {
          return this.$warn('每次只能上传一个文件')
        }
          // 处理zip格式
        if (this.fileList[0].name.indexOf('.zip') !== -1) {
          // 处理zip格式文件
          this.czTime =  this.czTime.replace(/-/,'') // 将格式改为后端需要的格式 将2022-01 改为202201 这里是因为上传zip时需要选择日期，
          const fileTime = this.fileList[0].name // 判断文件名中时间是否跟选择时间一致
          // console.log(this.czTime,fileTime,155)
          // 判断是否填写了日期，如果填写了并且和文件中时间一致，则上传，否则提示
          this.czTime ?  fileTime.indexOf(this.czTime) !== -1 ? this.fileList.forEach(file => {
            // 上传zip
          getFileUpload({file:file,czTime:this.czTime}).then(() => {
              this.close()
              this.$success('上传成功')
          }).catch(e=> {
            // console.log(222)
            this.$warn(e.errorInfo,'上传失败，请稍后再试')
          })
              // console.log(res,333)
    
        }) : this.$warn('文件日期与选择日期不一致') : this.$warn('请选择日期后重试')
    
        }else {
            // 上传excel文件
            this.fileList.forEach(file => {
              uploadFile({file: file}).then(() => {
              this.close()
              this.$success('上传成功')
            }).catch(e => {
              this.$warn(e.errorInfo,'上传失败，请稍后再试')
            })
            })
    
            }
      }