编辑表单多图片、多文件上传(表单上传多张图或文件)
[vue3代码]写在生成的[表.vue]文件中,[vue2代码]写在[表.jsx]文件methods方法中；二选一实现
vue3代码
const onInited=()=>{
//启用多文件/图上传,其他上传参数设置，参照volupload组件api
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=editFormFields.字段
//从编辑的行数据中获取参数
params.xx=gridRef.currentRow.字段
//后台重写【表service】类的中upload方法获取参数:
//string val= Utilities.HttpContext.Current.Request.Query["xx"]
return true;
}
//上传后
item.uploadAfter=(files)=>{
console.log('上传后')
return true;
}
}
})
})
vue2 代码
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=
}
})
})