Upload 文件上传

拖动上传

点击或拖拽上传

文件上传

这是 Upload 的基础例子

<script setup lang="ts">
const headers = {
  authorizetion: 'token',
}
</script>

<template>
  <div class="upload-demo">
    <h2>拖动上传</h2>
    <NpUpload
      action="https://cytp.cn/api/upload"
      accept=".png,.jpg"
      :headers="headers"
      :data="{ abc: '123' }"
      multiple
      drag
    />
  </div>
</template>

<style lang="less" scoped>
.upload-demo {
  display: flex;
  flex-direction: column;
  gap: 10px
}
</style>

自定义slot

点此上传

文件上传

这是 Slot 的基础例子

<script setup lang="ts">
const headers = {
  authorizetion: 'token',
}
</script>

<template>
  <div class="upload-demo">
    <h2>自定义slot</h2>
    <NpUpload
      multiple
      action="https://cytp.cn/api/upload"
      accept=".png,.jpg"
      :headers="headers"
      :data="{ abc: '123' }"
    >
      <template #default="{ handle }">
        <div class="upload-slot" @click="handle">
          <NpIcon icon="upload" type="primary" />
          <span>点此上传</span>
        </div>
      </template>
    </NpUpload>
  </div>
</template>

<style lang="less" scoped>
.upload-demo {
  display: flex;
  flex-direction: column;
  gap: 10px
}

.upload-slot {
  padding: 10px;
  display: flex;
  gap: 10px;
  border: 1px solid #ccc;

  &:hover {
    cursor: pointer;
    border: 1px solid #79bbff;
  }
}
</style>

上传列表

• abc000000001.md
  90%
• abc000000002.md
  30%
• abc02.md
• abc03.md

文件上传

这是 上传列表 的基础例子

<script setup lang="ts">
const headers = {
  authorizetion: 'token',
}

const defaultFileList = [
  { uid: '1000', size: 1024, name: 'abc000000001.md', status: 'uploading', percent: 90 },
  { uid: '1001', size: 1024, name: 'abc000000002.md', status: 'uploading', percent: 30 },
  { uid: '1002', size: 2048, name: 'abc02.md', status: 'success', percent: 30 },
  { uid: '1003', size: 2048, name: 'abc03.md', status: 'error', percent: 30 },
]
</script>

<template>
  <div class="upload-demo">
    <h2>上传列表</h2>
    <NpUpload
      multiple
      action="https://cytp.cn/api/upload"
      accept=".png,.jpg"
      :headers="headers"
      :default-file-list="defaultFileList"
      :on-progress="(percentage: number, file: File) => console.log('on-progress', percentage, file)"
      :on-success="(data: any, file: File) => console.log('on-success', data, file)"
      :on-error="(error: any, file: File) => console.log('on-error', error, file)"
    />
  </div>
</template>

<style lang="less" scoped>
.upload-demo {
  display: flex;
  flex-direction: column;
  gap: 10px
}
</style>