# 编辑表单多图片文件上传(表单上传多张图或文件)

# 明细表多图片、多文件上传


onInited() {
      //启用多文件/图上传,其他上传参数设置,参照volupload组件api
      this.editFormOptions.forEach(x => {
        x.forEach(item => {
          if (item.field == '字段') {
            item.type = 'file';//可以指定上传文件类型img/file/excel
            //设置上传图片字段100%宽度
           // item.colSize = 12;
            //启用多图上传(默认单图)
            item.multiple = true;
            //自动上传(默认自动上传)
            item.autoUpload=true;
            //最多可以上传3张照片
            item.maxFile = 3;
            //限制图片大小,默认3M
            item.maxSize = 3;

            //限制文件上传格式,注意:设置fileTypes后,上面的  item.type = 'file'需要去掉
            //item.fileTypes=['jpg','png','pdf']

            //选择文件时
            item.onChange=(files)=>{
               console.log('选择文件事件')
               //此处不返回true,会中断代码执行
               return true;
            }
            //上传前
            item.uploadBefore=(files,params)=>{
              console.log('上传前')
              //上传前可以自定义参数
              params.xx='123'
              //上传前可以自定义参数,从编辑表单、或者当前编辑的行数据中获取
              params.xx=this.editFormFields.字段
              //从编辑的行数据中获取参数
              params.xx=this.currentRow.字段
              //后台重写【表service】类的中upload方法获取参数:
              //string val= Utilities.HttpContext.Current.Request.Query["xx"]
              return true;
            }
             //上传后
             item.uploadAfter=(files)=>{
              console.log('上传后')
              return true;
            }
          }
        })


      //主从一对一明细表上传文件图或者图片
      this.detailOptions.columns.forEach(x=>{
          if(x.field=='字段'){
              x.edit={};

              x.edit.type= 'file';//可以指定上传文件类型img/file/excel
              x.edit.multiple = true;
              //其他属性配置同上:x.edit.xx=
          }
      })

      //主表从一对多二级明细表上传文件图或者图片
      this.details.forEach(c=>{
          if(c.table=='表名'){
              c.columns.forEach(x=>{
                    if(x.field=='字段'){
                        x.edit={};

                        x.edit.type= 'file';//可以指定上传文件类型img/file/excel
                        x.edit.multiple = true;
                        //其他属性配置同上:x.edit.xx=
                    }
              })
          }
      })

      
      //主表从一对多三级明细表上传文件图或者图片
      this.subDetails.forEach(c=>{
          if(c.table=='表名'){
              c.columns.forEach(x=>{
                    if(x.field=='字段'){
                        x.edit={};

                        x.edit.type= 'file';//可以指定上传文件类型img/file/excel
                        x.edit.multiple = true;
                        //其他属性配置同上:x.edit.xx=
                    }
              })
          }
      })

})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92