明细表图片上传、文件上传、图片压缩、文件重命名

代码生成器上明细表的编辑类型选择图片或者文件,主表点下生成页面

[vue3代码]写在生成的[表.vue]文件中,[vue2代码]写在[表.jsx]文件methods方法中;二选一实现
vue3 代码
const onInited=()=>{
    //启用多文件/图上传,其他上传参数设置,参照volupload组件api

      // //主从一对一明细表上传文件图或者图片
      grdiRef.detailOptions.columns.forEach(item=>{
          if(item.field=='字段'){
               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;
              }
          }
      })

      // //主表从一对多二级明细表上传文件图或者图片
      // grdiRef.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=
      //               }
      //         })
      //     }
      // })


      // //主表从一对多三级明细表上传文件图或者图片
      // grdiRef.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=
      //               }
      //         })
      //     }
      // })

}
Last Updated 2025/12/5 19:10:23