Vben的Userform中循环渲染Upload组件以及增加Upload表单

1.关于userform中的Upload组件

        vben中的Upload组件默认读取你所填写的数组对象中的第一位的url属性，如果后端返回的数据并不是url，可以在请求回来后对数据进行替换更改。（只适用于上传一张）

 

 2.循环渲染Upload组件

界面及后端返回数据如下

拿到数据经过方法渲染，代码如下（示例）：

 
      // 渲染函数
      const setDynamicFormsAA = (i) => {
        appendSchemaByField(
          {
            field: `${i}`,
            component: 'Input',
            label: ' ',
            colProps: {
              span: 4,
            },
            slot: 'add111',
          },
          'title',
        );
        appendSchemaByField(
          {
            field: `image_list_grade_${i}`,
            component: 'Input',
            label: '购买等级',
            colProps: {
              span: 10,
            },
            required: true,
          },
          '',
        );
        appendSchemaByField(
          {
            field: `image_list_img_${i}`,
            component: 'Upload',
            label: '充值卡封面',
            colProps: {
              span: 10,
            },
           rules: [{ required: true, message: '请选择上传文件' }],
           componentProps: {
             api: uploadApi,
             maxNumber: 1,
             accept: ['.jpg', '.png', '.jpeg', '.gif'],
           },
          },
          '',
        );
      }; 
      // 拿到数据循环渲染
      const m=ref（0）
      const setFormValuesAA = (product_id_rule) => {
        // defaultRule设置你要循环渲染对象中的什么内容
        let defaultRule = [
          { grade: '', img:'',img_id:'' },
        ];
        if (product_id_rule.length > 0) {
          defaultRule = product_id_rule;
        }
        const obj = {};
        // // 动态 m 递增赋值
        m.value = defaultRule.length;
        for (let i = 0; i < defaultRule.length; i++) {
          // 组装渲染表单数据源
          const { grade, img, img_id } = defaultRule[i];
          obj[`image_list_grade_${i}`] = grade
          // Upload默认渲染方式看最上面关于Upload，所以我们要将渲染的img在重新
          // 包多一层，遵循upload默认渲染方式
          obj[`image_list_img_${i}`] = [{ url:img,id:img_id}];
          // 组装表单 Element
          setDynamicFormsAA(i);
        }
        setFieldsValue({
          ...obj,
        });
      };

3.数据提交

代码如下（示例）：

 //提交
const validateForm = async () => {
        try {
          const values = await validateFields();
          const list = Object.keys(values)
            .filter((f : any) => f.startsWith('image_list_grade_'))
            .map((m : any, m_i : number) => ({
              img: values[`image_list_img_${m_i}`][0].id,   
              grade: values[`image_list_grade_${m_i}`],
            }));
          console.log(values,'393')    
          setTimeout(() => {
            postGiftCardDetails({
              ...values,
              image_list:list
            }).then((res : any) => {
              createMessage.success('提交成功');
            });
          }, 300)
        } catch (error) {
          createMessage.error('系统错误，请稍后重试');
        }
      };

4.upload组件增加及减少

 const add111= () => {
        setDynamicFormsAA(m.value);
        m.value++;
      }; 

const del111= (field) => {
        removeSchemaByFiled([
          `image_list_img_${field}`,
          `image_list_grade_${field}`,
          `${field}`,
        ]);
        m.value--;
   };

PS：增加及减少按钮位置和表单基础内容可查看我的文章关于userform的表单内容

---

总结

Vben的Userform中循环渲染Upload组件以及增加Upload表单内容