编辑表单图片上传、文件上传、图片压缩、文件重命名
[vue3代码]写在生成的[表.vue]文件中,[vue2代码]写在[表.jsx]文件methods方法中;二选一实现
vue3 代码
const onInited=()=>{
//启用多文件/图上传,其他上传参数设置,参照volupload组件api
const item = gridRef.getFormOption('字段');
item.type = 'img';//可以指定上传文件类型img/file/excel
//设置上传图片字段100%宽度
// item.colSize = 12;
//启用多图上传(默认单图)
item.multiple = true;
//自动上传(默认自动上传)
item.autoUpload = true;
//最多可以上传3张照片
item.maxFile = 3;
//限制图片大小,默认3M
item.maxSize = 3;
//图片压缩(只对图片有效,205.12.07更新前端components文件夹后才有效)
item.compress = true;
//限制文件上传格式,注意:设置fileTypes后,上面的 item.type = 'file'需要去掉
//item.fileTypes=['jpg','png','pdf']
//选择文件时
item.onChange = (files) => {
console.log('选择文件事件')
//此处不返回true,会中断代码执行
return true;
}
//上传前
item.uploadBefore = async (files, params) => {
console.log('上传前')
//上传前可以自定义参数
params.xx = '123'
//上传前可以自定义参数,从编辑表单、或者当前编辑的行数据中获取
params.xx = editFormFields.字段
//从编辑的行数据中获取参数
params.xx = gridRef.currentRow.字段
//后台重写【表service】类的中upload方法获取参数:
//string val= Utilities.HttpContext.Current.Request.Query["xx"]
//文件重命名(205.12.07更新前端components文件夹后才有效)
await proxy.base.resetFileName(files, (file) => {
return '自定义名称'
//return false;不会重命名文件(可根据file判断)
})
return true;
}
//上传后
item.uploadAfter = (files) => {
console.log('上传后')
return true;
}
//删除文件事件
item.removeBefore = (index, file, files) => {
return;
}
//文件点击事件
item.fileClick = (index, file, files) => {
return;
}
// //主从一对一明细表上传文件图或者图片
// detailOptions.columns.forEach(x=>{
// if(x.field=='字段'){
// x.edit={};
// x.edit.type= 'file';//可以指定上传文件类型img/file/excel
// x.edit.multiple = true;
// //其他属性配置同上:x.edit.xx=
// }
// })
// //主表从一对多二级明细表上传文件图或者图片
// 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=
// }
// })
// }
// })
// //主表从一对多三级明细表上传文件图或者图片
// 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=
// }
// })
// }
// })
}
vue2 代码
onInited() {
//启用多文件/图上传,其他上传参数设置,参照volupload组件api
const item = this.getFormOption('字段');
item.type = 'img';//可以指定上传文件类型img/file/excel
//设置上传图片字段100%宽度
// item.colSize = 12;
//启用多图上传(默认单图)
item.multiple = true;
//自动上传(默认自动上传)
item.autoUpload = true;
//最多可以上传3张照片
item.maxFile = 3;
//限制图片大小,默认3M
item.maxSize = 3;
//图片压缩(只对图片有效,205.12.07更新前端components文件夹后才有效)
item.compress = true;
//限制文件上传格式,注意:设置fileTypes后,上面的 item.type = 'file'需要去掉
//item.fileTypes=['jpg','png','pdf']
//选择文件时
item.onChange = (files) => {
console.log('选择文件事件')
//此处不返回true,会中断代码执行
return true;
}
//上传前
item.uploadBefore = async (files, params) => {
console.log('上传前')
//上传前可以自定义参数
params.xx = '123'
//上传前可以自定义参数,从编辑表单、或者当前编辑的行数据中获取
params.xx = editFormFields.字段
//从编辑的行数据中获取参数
params.xx = gridRef.currentRow.字段
//后台重写【表service】类的中upload方法获取参数:
//string val= Utilities.HttpContext.Current.Request.Query["xx"]
//文件重命名(205.12.07更新前端components文件夹后才有效)
await this.base.resetFileName(files, (file) => {
return '自定义名称'
//return false;不会重命名文件(可根据file判断)
})
return true;
}
//上传后
item.uploadAfter = (files) => {
console.log('上传后')
return true;
}
//删除文件事件
item.removeBefore = (index, file, files) => {
return;
}
//文件点击事件
item.fileClick = (index, file, files) => {
return;
}
// //主从一对一明细表上传文件图或者图片
// 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=
// }
// })
// }
// })
}
