编辑表单图片上传、文件上传、图片压缩、文件重命名

[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=
      //               }
      //         })
      //     }
      // })

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