elementUI中form表单的upload上传图片及校验总结

番茄西红柿发布于2019-08-23 14:22 / 3657人阅读

摘要：自定义校验方法因为我的项目是分情况可以选择是否有图所以我定义了一个变量当他为的时候才会要求上传走这个校验方法里声明这个方法图片验证请上传图片图片验证根据情况去切换的值就可以控制是否校验失败啦这就是校验图片的思路了是不是很简单呢再来说说表单带

自定义校验方法,因为我的项目是,分情况,可以选择是否有图,所以我定义了一个变量hasFmt,
当他为false的时候,才会要求上传,走这个校验方法,rules里声明这个方法

   var valiIcon = (rule, value, callback) => { // 图片验证
    if (!this.hasFmt) {
      callback(new Error("请上传图片"));
    } else {
      callback();
   }
   icon:[
    {required:true, validator: valiIcon, trigger: "change" }  // 图片验证
   ]

根据情况去切换hasFmt的值就可以控制是否校验失败啦~~
这就是校验图片的思路了,是不是很简单呢~~~

再来说说表单带着图片一起上传~

fileChange(file,fileList){
    
    this.bannerForm.filename = file.name;
    this.bannerForm.file = file.raw;
    console.log(file.raw)
    if(fileList.length>0){
      this.hasFmt = true;
    }
},

例如,file change的时候,当fileList有值,就可以断定已经选取了图片了,讲file流保存好,
(我这里是:this.bannerForm.file = file.raw;)并且可以把hasFmt变为ture啦,
再者,file remover的时候回显的时候, 等等,都要根据情况改变hasFmt的值,来达到图片的校验
上传是这样的:

this.$refs.bannerForm.validate((valid) => {
  if(valid){
    let param = new FormData();
    this.toBannerBtn = true;
    param.append("file",this.bannerForm.file,this.bannerForm.filename);
    param.append("tokenId",this.$store.state.user.tokenId);
    param.append("titleShort",this.bannerForm.title_short);
    param.append("bannerType","1");
    param.append("linkId",this.bannerForm.link);
    param.append("articleId",this.bannerForm.articleId);
    console.log(param)
    this.$post("bannerInfo/save",param).then(res =>{
      // console.log(res);
      if(res.code == 0){
        this.$message({
          type: "success",
          message: res.msg
        });
        setTimeout(() => {
          this.newsList();
        }, 1000);
        this.bannerForm={};
        this.bannerDialog = false;
      }else{
        this.$message({
          type: "warning",
          message: res.msg?res.msg:"出错了"
        });
      }
       this.toBannerBtn = false;
    })
   }
 })

表单校验后,就可以进行上传啦,采用的是new FormData();取值上传的,要注意 ,取消其序列号,我在公共的上传方法里封装好了,所以这里就直接调用啦~

小可爱们,如果觉得学到了一点点,麻烦点个赞哟,灰常感谢啦~

云服务器海外云主机 form表单校验前端上传form表单 form表单文件上传 form表单中的action

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/100513.html

【elementUI系列】使用elementUI调用一次接口同时上传图片和文件，同时需要携带其他参数

摘要：今天有一个坑，同时要上传图片和文件，而且图片要展示缩略图，文件要展示列表。我的思路是首先，只上传附件照片，这个直接看的官方例子就行，不仅仅上传附件照片，还同时上传其他参数。然后，再做上传照片和文件，上传其他参数，其实也就是文件合并。今天有一个坑，同时要上传图片和文件，而且图片要展示缩略图，文件要展示列表。我的思路是：首先，只上传附件照片，这个直接看ele的官方例子就行，不仅仅上传...

lavor 2019-08-23 13:55 评论0 收藏0
图片上传知识点梳理

摘要：在日常项目开发中，图片上传是一个十分常见的场景。在图片拖拽上传这个业务场景中，被拖拽元素为页面外部的图片文件，故此处仅用到目标元素的各个事件。具体实现代码如下至此，图片上传的常用知识点以梳理完毕，欢迎补充。在日常项目开发中，图片上传是一个十分常见的场景。而现在的各种UI框架都提供了自己的上传组件，网上第三方的上传组件也多如牛毛。可能你早已习惯了直接使用这些现成的组件，然而对于其具体的...

Pink 2019-08-02 11:55 评论0 收藏0
图片上传知识点梳理

摘要：在日常项目开发中，图片上传是一个十分常见的场景。在图片拖拽上传这个业务场景中，被拖拽元素为页面外部的图片文件，故此处仅用到目标元素的各个事件。具体实现代码如下至此，图片上传的常用知识点以梳理完毕，欢迎补充。在日常项目开发中，图片上传是一个十分常见的场景。而现在的各种UI框架都提供了自己的上传组件，网上第三方的上传组件也多如牛毛。可能你早已习惯了直接使用这些现成的组件，然而对于其具体的...

Astrian 2019-08-23 12:49 评论0 收藏0
步步向前之Element-UI

摘要：无效方案根据交易所小时成交量占比和实时价格加权计算得到渲染结果是一个包含了文字，同时有名为的，并无小图标，后边中括号结构里只能有一个有待考证。 Table 固定表头只要在el-table元素中定义了height属性，即可实现固定表头的表格，而不需要额外的代码。例如： ... 这里文档只给了一种固定高度250px的解决方案，实际应用大多数是需要自适应占满父元素，超出滚动固定表头的...

Imfan 2019-08-02 11:51 评论0 收藏0