Upload

Matches Arco Upload with drag areas and picture cards. These examples select files without uploading them. See the Element Plus docs for props.

Drag & Drop

Drag matches Arco draggable; auto-upload="false" keeps this example local.

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>

Picture Cards

Picture cards display a local image and allow selecting more files.

• 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>

Differences from Arco

• Drag-area icons are supplied by the application; Element Plus icons differ from Arco's default plus.