明细表多图片、文件上传

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

[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;
        };
        //删除文件事件
        item.removeBefore = (index, file, files) => {
          return;
        };
        //文件点击事件
        item.fileClick = (index, file, files) => {
          return;
        };
        //删除文件事件
        item.removeBefore = (index, file, files) => {
          return;
        };
        //文件点击事件
        item.fileClick = (index, file, files) => {
          return;
        };
      }
    });

    //(主从明细表)主从一对一明细表上传文件图或者图片
    gridRef.detailOptions.columns.forEach((x) => {
      if (x.field == "字段") {
        x.edit = {};

        x.edit.type = "file"; //可以指定上传文件类型img/file/excel
        x.edit.multiple = true;
        //其他属性配置同上:x.edit.xx=
      }
    });

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

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