# 明细表上传图片或文件
//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
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