上传 Upload

对应 Arco Upload：支持拖拽区域与图片卡片。示例仅选择文件，不发起上传。 属性用法见 Element Plus 文档。

拖拽选择

drag 对应 Arco draggable，:auto-upload="false" 让示例只选择文件。

Drop files here or click to select

<script setup lang="ts">
import { UploadFilled } from '@element-plus/icons-vue'
</script>

<template>
  <el-upload drag action="#" :auto-upload="false" style="width: 100%">
    <el-icon class="el-icon--upload"><UploadFilled /></el-icon>
    <div class="el-upload__text">Drop files here or <em>click to select</em></div>
  </el-upload>
</template>

图片卡片

list-type="picture-card" 展示本地图片及可继续选择的卡片。

• press delete to remove

<script setup lang="ts">
import { ref } from 'vue'
import { Plus } from '@element-plus/icons-vue'
import type { UploadUserFile } from 'element-plus'
import landscape from '../assets/landscape.svg'

const files = ref<UploadUserFile[]>([{ name: 'Landscape', url: landscape }])
</script>

<template>
  <el-upload v-model:file-list="files" list-type="picture-card" action="#" :auto-upload="false">
    <el-icon><Plus /></el-icon>
  </el-upload>
</template>

与 Arco 的差异

• 拖拽区图标由使用者提供，使用 Element Plus 图标时形状与 Arco 默认加号不同。