# 明细表上传图片或文件


//2023.06.24更新Sys_TableInfoService.cs中CreateVuePage方法,voltable.vue文件后,代码生成器设置编辑类型即可自动完成表格图片上传

onInited() {

      //明细表上传文件图或者图片
      this.detailOptions.columns.forEach(x=>{
          if(x.field=='字段'){
              x.edit={};
              x.edit.type= 'file';//可以指定上传文件类型img/file/excel
              x.edit.multiple = true;
            //设置上传图片字段100%宽度
             // x.edit.colSize = 12;
            //启用多图上传(默认单图)
            x.edit.multiple = true;
            //自动上传(默认自动上传)
            x.edit.autoUpload=true;
            //最多可以上传3张照片
            x.edit.maxFile = 3;
            //限制图片大小,默认3M
            x.edit.maxSize = 3;
            //选择文件时
            x.onChange=(files)=>{
               console.log('选择文件事件')
               //此处不返回true,会中断代码执行
               return true;
            }
            //上传前
            x.uploadBefore=(files,params,row)=>{
              //row当前上传的行数据
              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;
            }
             //上传后
             x.uploadAfter=(files)=>{
              console.log('上传后')
              return true;
            }
          }
      })
})



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