vue项目element-ui 手动创建多个上传附件按钮还是必选项

项目要求,手动创建多个附件,而且附件为必选项,每次只能上传一个(如下图),号图标是手动添加,号图标删除

要求实现效果

我这里用的是input的file来做,怎么在vue中用input的file来上传文件,这里就不写了
用了element-ul,form自带的验证rules

难倒是不难,就是很繁琐
1、怎么验证文件是否上传?
2、怎么判断上传的文件是哪一个的?怎样能一一对应
添加多个块,是用的v-for,数据绑定,每次删除的时候,是删除的数据,所以根据数组的下标来写,是行不通的
所以每次添加时候,给数据加了一个标识,删除的时候,完全不影响。

var j = {
   name:'',
   remarks:'',
   fileName:'', 
   isremove:true,
   fileindex:index,
};
j['file'+index] = ''; //为什么加这个,验证的时候能用到
this.list.push(j);  

rules也是手动添加

this.rules2['file'+index]= [  { required: true, validator: this.valiFile, trigger: "change" },  ];

以下是 validator 验证

var valiFile = (rule, value, callback) => {  
   var fileid = rule.field;
   for(var i =0;i<this.list.length;i++){
    if(this.list[i].hasOwnProperty(fileid)){
      if (!this.list[i][fileid]) {
        callback(new Error('请上传材料附件'));
      } else {
        callback();
      }
    } 
  } 
};

最后保存的时候来验证

this.$refs.ruleForm.validate((valid) => {})

提交的时候用的 new FormData();

var arrlist = this.list; 
for(var i = 0 ;i<arrlist.length;i++){ 
  formData.append('remarks'+(i+1),arrlist[i].remarks);  //键后面加上下标是后台要求的
  formData.append('file'+(i+1),arrlist[i]['file'+arrlist[i].fileindex]);
}    

技术有限,暂时没想到更简单的方法。。。。。。

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容