FEATURE: 求求出个Upload组件的Demo吧！

[afresh]

Version

Vben Admin V5

Description

文档里没找到Upload组件，演示里也没有找到。

Proposed Solution

麻烦给一个上传图片的demo，包括预览、上传、下载、删除等功能。

Alternatives Considered

No response

Additional Context

No response

Validations

• Read the docs
• Ensure the code is up to date. (Some issues have been fixed in the latest version)
• I have searched the existing issues and checked that my issue does not duplicate any existing issues.

[wangz-code]

组件库里不都是现成的吗? 直接抄啊

[afresh]

@wangz-code 写法不太一样噢！

我用的element-plus，自己尝试写了一下。

const [Form, { resetForm, validate, getValues }] = useVbenForm(
  reactive({
    schema: computed(() => [
      {
        component: 'Upload' as const,
        componentProps: {
          accept: 'image/*',
          action: '/vben/upload',
          data: {
            type: 'logo'
          }
          limit: 1,
          listType: 'picture-card',
          showUploadList: false,
        },
        fieldName: 'logo',
        help: $t('page.navigation.logoTip'),
        label: $t('page.navigation.logo'),
        renderComponentContent: () => {
          return {
            default: () => 'Upload',
          };
        },
      }
    ]),
    showDefaultActions: false,
  }),
);

可以正常渲染组件，但不知道怎么给这个组件初始化赋值，也就是让组件初始化时自动加载已上传的图片（类似修改头像功能）。还有data参数传不过去。

[wangz-code]

@afresh 你试下这样, componentProps 支持函数写法, 后续很多地方都会用到 想怎么写就怎么写

方式一 表单组件

    {
      component: 'Upload',
      fieldName: 'images',
      label: 'Images',
      componentProps: (rows) => {
        console.log('value log==>', rows.images);
        return {
          listType: 'picture-card',
          autoUpload: false,
          onPreview: () => {
            console.log('onPreview log==>');
          },
          onRemove: () => {
            console.log('onRemove log==>');
          },
        };
      },
      renderComponentContent: () => ({
        default: () => h(ElIcon, {}, () => [h(Plus, {}, '')]),
      }),
    },

方式二 slot形式

// 配置
   {
      component: 'Input',
      fieldName: 'imagesData',
      label: 'ImagesSlot',
      rules: 'required',
    },
//  插槽
   <Form>
        <template #imagesData="{ field }">
          <el-upload
            v-model:file-list="field.value"
            list-type="picture-card"
            :auto-upload="false"
          >
            <template #trigger>
              <el-button type="primary">select file</el-button>
            </template>
          </el-upload>
        </template>
      </Form>

设置值

formApi.setValues({
    string: 'string',
    images: [
      {
        name: 'food.jpeg',
        url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100',
      },
    ],
imagesData: [
      {
        name: 'food.jpeg',
        url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100',
      },
    ],
  });