VUE PDF文件上传、预览

    
      

        文      件:
        
        
          选取文件
        
         
           
             
               
             
           
           
             
               
             
           
         
        
备注：仅限上传一个PDF文件
      
      

        预览
        上传
        取 消
      
    
  

//上传PDF文件之前
      beforeUpload(file){
        console.log("文件", file);
        this.file = file;
        this.fileName = file.name;
        // this.fileSize = file.size;
        const extension = file.name.split('.').slice(-1) == 'pdf'
        if (!extension) {
          this.$message.warning('上传模板只能是pdf格式!')
          return
        }
        let reader = new FileReader();
        reader.readAsDataURL(file);
        let that = this;
        reader.onload = function() {
          that.fileData = reader.result;
        };
        return false; // 返回false不会自动上传
      },
      //预览文件
      viewfile(){
        console.log("viewFile");
        var win = window.open();
        win.document.write(
          ''
        );
        // win.document.write(
        //   ''
        // );
      },
      //上传文件按钮
      upLoadpdf(){
        if(this.fileName === ''){
          this.$message.warning('请选择要上传的文件！');
          return false
        }
        if(this.pdfForm.announcementType === ''){
          this.$message.warning('请选择公告类型');
          return false
        }
        if(this.pdfForm.fileLevel === ''){
          this.$message.warning('请选择公告级别');
          return false
        }
            //后端需要三个参数file、announcementType、fileLevel，用fileFormData包起来防止
           // 出现 headers:  'multipart/form-data'等错误
          // 若后端只需一个参数  添加
          //  let requestConfig = {
          //headers: {
           // 'Content-Type': 'multipart/form-data'
          //},
        //}
        //this.axios.post('/market/upload',formData,requestConfig).then((res)=>
         
            let fileFormData = new FormData();
            fileFormData.append("file", this.file);
            fileFormData.append('announcementType',this.pdfForm.announcementType)
            fileFormData.append('fileLevel',this.pdfForm.fileLevel)
            this.axios.post('/admin/uploadUserFile',fileFormData).then(res =>{
              if (res.data.status===1){
                this.$message({
                  message:res.data.msg,
                  type:'success',
                  duration: 3000,
                });
                this.showDataImportDialog=false
              }else{
                this.messageLabel = this.$message({
                  message:res.data.msg,
                  type:'error',
                  showClose:true,
                  duration:0,
                });
              }
            })
      },