1. 先展示一个效果图

2.代码详解

          
     
        
      
       发布封面
      
        
      
           // uploadList(重点）        
              
      
       
                  
       
                
               // 默认icon            
       
          
       //点击为大图          
                  
          // closable  点击model右上角，关闭模态框，默认为true，          
                
      
           // 一些格式说明            
       
1.格式为jpg或png
            
       
2.且不能大于2M
            
       
3.建议尺寸336*160
          
      
        
     
        
     
          
      确定  // 信息提交按钮        
     

data(){

uploadCoverUrl：'',

uploadList :[],

coverLink :'',

show:true，

visible: false,

header:{

'token': sessionStorage.getItem('token')

}

}

//封面缩略图 图片上传成功后的操作          handleSuccess(res, file){            let _this = this;            console.log(res)            file.path = res.data.path            file.name = _this.getNameFromLink(file.path)            _this.coverLink = file.path            _this.uploadList.push(file)            _this.show = false; }, //判断图片格式对不对  handleFormatError (file) { this.$Notice.warning({ title: '图片格式不正确', desc: file.name + ' 格式不正确，请重新选择' }); }, //限制图片大小  handleMaxSize (file) { this.$Notice.warning({ title: '图片尺寸过大', desc: file.name + ' 太大，最大为2M，请注意图片大小！' }); }, //限制图片的张数  handleBeforeUpload (file) { if(this.uploadList){ const check = this.uploadList.length < 1; if (!check) { this.$Notice.warning({ title: '最多上传一张图片！' }); } return check; } }, // 点击看大图  handleView(name){ console.log(name) this.imgName = name; this.visible = true; this.$store.state.addArticle = false }, // 删除一张图片  handleRemove(file){ this.uploadList.splice(file, 1); this.show = true; //这个是显示上传的那个icon },

//上传pdf文件 
        
      
     
            
       
将文件拖拽至此或选择文件(最多上传50M的pdf文件)
     
       
点击上传
   
      
 
     

// 点击查看pdf的操作   lookPdf(file){
       console.log(file)     let _this = this;     let url;     if(file.response){
        url = file.response.data.path     }else{
        url = file.url     }     window.open(url)   }, // pdf上传成功的操作   handleSuccessPdf(res,file,fileList){
       let _this = this;     console.log(fileList)     _this.$refs.previewPdf.fileList = fileList     _this.defaultList = fileList     _this.contentAccessoryIds = res.data.id   }, // pdf文件移除时候的方法 handleRemoveFile(file,fileList){
     console.log(fileList)   console.log(this.defaultList.length)   this.defaultList = fileList   console.log(this.defaultList) }, // 上传pdf文件的数量控制 handleBeforeUploadp(){
     let _this = this;   console.log(_this.defaultList)   const tpl = _this.defaultList.length < 1   if(!tpl) {
       _this.$Notice.warning({
               title: '最多上传一个pdf文件！'         });   }   return tpl; }, // 通过iframe上传视频

      
     
   
          
         
      
     
       
        X