明细表多图片、文件上传
代码生成器上明细表的编辑类型选择图片或者文件,主表点下生成页面
[vue3代码]写在生成的[表.vue]文件中,[vue2代码]写在[表.jsx]文件methods方法中;二选一实现
vue3代码
//生成对象属性初始化
const onInited = () => {
//主表表单:启用多文件/图上传,其他上传参数设置
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;
}
}
})
//(主从明细表)主从一对一明细表上传文件图或者图片
gridRef.detailOptions.columns.forEach(x=>{
if(x.field=='字段'){
x.edit={};
x.edit.type= 'file';//可以指定上传文件类型img/file/excel
x.edit.multiple = true;
//其他属性配置同上:x.edit.xx=
}
})
})
}
vue2 代码
onInited() {
//主表表单:启用多文件/图上传,其他上传参数设置
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;
}
}
})
}