Upload 上传组件

基础用法

最基本的上传组件使用方式：

图片上传

使用 list-type="picture-card" 来设置图片上传样式：

拖拽上传

设置 drag 属性可以启用拖拽上传：

自定义上传按钮

通过 uploadSlots.default 或 uploadSlots.trigger 自定义上传触发区域：

{
  type: 'el-upload',
  key: 'avatar',
  name: '上传头像',
  componentProps: {
    action: '/api/upload/avatar',
    'show-file-list': false
  },
  uploadSlots: {
    default: (h) => h('div', { class: 'avatar-uploader' }, [
      h('img', { src: this.formValues.avatar }),
      h('span', '点击上传头像')
    ])
  }
}

带提示的上传

使用 uploadSlots.tip 添加上传提示：

{
  type: 'el-upload',
  key: 'documents',
  name: '文档上传',
  componentProps: {
    action: '/api/upload/docs',
    multiple: true
  },
  uploadSlots: {
    tip: (h) => h('div', { class: 'el-upload__tip' },
      '只能上传 jpg/png 文件，且不超过 500kb'
    )
  }
}

自定义文件列表

通过 uploadSlots.file 自定义单个文件的展示：

{
  type: 'el-upload',
  key: 'documents',
  name: '文档上传',
  componentProps: {
    action: '/api/upload/docs',
    multiple: true
  },
  uploadSlots: {
    file: (file, h) => h('div', { class: 'custom-file-item' }, [
      h('i', { class: 'el-icon-document' }),
      h('span', { class: 'filename' }, file.name),
      h('span', { class: 'filesize' }, formatFileSize(file.size))
    ])
  }
}

拖拽上传

结合 Element Plus 的拖拽上传功能：

{
  type: 'el-upload',
  key: 'images',
  name: '图片上传',
  componentProps: {
    action: '/api/upload/images',
    drag: true,
    multiple: true,
    'list-type': 'picture-card'
  },
  uploadSlots: {
    default: (h) => h('div', [
      h('i', { class: 'el-icon-upload' }),
      h('div', { class: 'el-upload__text' }, [
        h('em', '将文件拖到此处，或'),
        h('span', '点击上传')
      ])
    ]),
    tip: (h) => h('div', { class: 'el-upload__tip' },
      '支持多个图片同时上传'
    )
  }
}

完整的自定义示例

包含所有插槽的完整示例：

{
  type: 'el-upload',
  key: 'files3',
  name: '文件上传',
  componentProps: {
    action: '/api/upload',
    multiple: true,
    'show-file-list': true,
    'list-type': 'picture',
  },
  componentEvents: {
    'on-success': (response, file, fileList) => {
      console.log('上传成功', response, file, fileList)
    }
  },
  uploadSlots: {
    default: (h) => h('div', { class: 'upload-trigger' }, [
      h('i', { class: 'el-icon-upload' }),
      h('span', '点击上传文件')
    ]),
    tip: (h) => h('div', { class: 'el-upload__tip' }, [
      h('p', '支持的文件类型：jpg, png, pdf'),
      h('p', '单个文件不超过 2MB')
    ]),
    file: (file, h) => h('div', { class: 'custom-file' }, [
      h('img', { src: file.url }),
      h('div', { class: 'info' }, [
        h('span', { class: 'name' }, file.name),
        h('span', { class: 'size' }, formatFileSize(file.size))
      ])
    ]),
    fileList: (fileList, h) => h('div', { class: 'custom-file-list' },
      fileList.map(file => h('div', { class: 'file-item' }, [
        h('span', file.name),
        h('button', { onClick: () => handleRemove(file) }, '删除')
      ]))
    )
  }
}

注意事项

1. 上传组件的值会自动绑定到 formValues 中
2. 可以通过 componentProps 配置所有 Element Plus Upload 组件的属性
3. 所有插槽都是可选的，未配置时会使用默认的渲染方式
4. 文件上传相关的回调函数（如 on-success、on-error 等）可以通过 componentEvents 配置

自定义上传方法 httpRequest

在 Element Plus 的 Upload 组件中，如果使用 httpRequest 来上传文件，默认情况下它并不会自动处理文件列表 (file-list) 的变化，因为 httpRequest 是自定义的上传方法，它不会直接与 file-list 进行双向绑定。 不过，还是可以通过手动处理 file-list 来实现双向绑定。在 httpRequest 中，你可以通过监听文件上传成功或失败的事件来更新 file-list

表单复现

常见的表单复现