vue+element 中表单提交el-form+上传组件el-upload

个人blog，欢迎关注加收藏

1. 页面效果
   
2. html代码：弹框：表单中包含图片上传的组件el-upload

//html
 
    

      
        
          
            
            
              
            
          
          
           
          
          
            
          
          
            
          
        
        

          确 定
        
      
    

3. js代码

4. css代码

//css
/* 对话框 */
.secondaryClassification>>>.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .secondaryClassification>>>.avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .secondaryClassification>>>.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .secondaryClassification>>>.avatar {
    width: 178px;
    height: 178px;
    display: block;
  }

5. 上传图片的代码原理解析：

• el-upload的action随便填写action="111" //这里随便写，反正用不到，但是又必须要写，无奈，在钩子函数:before-upload="beforeAvatarUpload"阻止action的默认行为，再用钩子函数beforeAvatarUpload上传图片，将图片封装成formData对象，用ajax将图片对象传给后台接收图片的接口（后台需要提供一个单独上传图片的接口）：

 //上传之前的钩子函数
    beforeAvatarUpload(file) {
    	let api = /api/up/file;
      let fd = new FormData();
      fd.append('file',file);//传文件
      // fd.append('srid',this.upLoadData.srid);//传其他参数
      axios.post(api,fd).then(function(res){
              console.log('成功');
      })
      return false//屏蔽了action的默认上传
    }

• 上传成功后用钩子函数:on-success="handleAvatarSuccess"实现本地预览，并获取到表单提交时需要的图片路径：

//图片上传成功实现本地预览
   handleAvatarSuccess(res, file) {
       let _this = this;
       _this.form.imageUrl = URL.createObjectURL(file.raw);//表单获取到提交时要传的图片路径
     },

      //图片的本地预览
        
      
    

• 最后表单提交

 //提交表单
    sureFormSubmit(){
     let _this = this;
     let api = '';
     _this.axios.post(api,{}).then(res=>{console.log(res)});
  }