ETU组件库

Appearance

Return to top
On this page

Upload 上传

通过点击或者拖拽上传文件。

基础用法

通过 slot 你可以传入自定义的上传按钮类型和文字提示。 可通过设置 limit 和 on-exceed 来限制上传文件的个数和定义超出限制时的行为。 可通过设置 before-remove 来阻止文件移除操作。

  • test1.svg
  • test2.svg
<template>
  <etu-upload
    ref="uploadRef"
    v-model:file-list="fileList"
    class="upload-demo"
    action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
    name="files"
    multiple
  >
    <etu-button type="primary">点击上传</etu-button>
  </etu-upload>
</template>

<script lang="ts" setup>
import { ref } from "vue";

const fileList = ref([
  {
    name: "test1.svg",
    url: "https://test/test1.svg",
  },
  {
    name: "test2.svg",
    url: "https://test/test2.svg",
  },
]);
</script>

<template>
  <etu-upload
    ref="uploadRef"
    v-model:file-list="fileList"
    class="upload-demo"
    action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
    name="files"
    multiple
  >
    <etu-button type="primary">点击上传</etu-button>
  </etu-upload>
</template>

<script lang="ts" setup>
import { ref } from "vue";

const fileList = ref([
  {
    name: "test1.svg",
    url: "https://test/test1.svg",
  },
  {
    name: "test2.svg",
    url: "https://test/test2.svg",
  },
]);
</script>

拖拽上传

你可以将文件拖拽到特定区域以进行上传。

Drop file here or click to upload
格式要求：png/jpg
    <template>
  <div>
    <etu-upload
      v-model:file-list="fileList"
      class="upload-demo"
      action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
      name="files"
      :auto-upload="true"
      drag
      multiple
      accept="image/png, image/jpeg"
    >
      <template #tip>
        <div>格式要求：png/jpg</div>
      </template>
    </etu-upload>
  </div>
</template>

<script lang="ts" setup>
import { ref } from "vue";

const fileList = ref();
</script>

    <template>
  <div>
    <etu-upload
      v-model:file-list="fileList"
      class="upload-demo"
      action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
      name="files"
      :auto-upload="true"
      drag
      multiple
      accept="image/png, image/jpeg"
    >
      <template #tip>
        <div>格式要求：png/jpg</div>
      </template>
    </etu-upload>
  </div>
</template>

<script lang="ts" setup>
import { ref } from "vue";

const fileList = ref();
</script>

    手动上传

    你可以关闭上传，手动统一上传。

      <template>
  <etu-upload
    ref="uploadRef"
    class="upload-demo"
    action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
    :auto-upload="false"
  >
    <template #trigger>
      <etu-button type="primary">选择文件</etu-button>
    </template>

    <etu-button class="ml-3" type="success" @click="submitUpload">
      点击上传
    </etu-button>
  </etu-upload>
</template>
<script lang="ts" setup>
import { ref } from "vue";

const uploadRef = ref();

const submitUpload = () => {
  uploadRef.value!.submit();
};
</script>

      <template>
  <etu-upload
    ref="uploadRef"
    class="upload-demo"
    action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
    :auto-upload="false"
  >
    <template #trigger>
      <etu-button type="primary">选择文件</etu-button>
    </template>

    <etu-button class="ml-3" type="success" @click="submitUpload">
      点击上传
    </etu-button>
  </etu-upload>
</template>
<script lang="ts" setup>
import { ref } from "vue";

const uploadRef = ref();

const submitUpload = () => {
  uploadRef.value!.submit();
};
</script>

      Upload属性

      名称描述类型默认值必填
      action请求 URLstring—是
      headers设置上传的请求头部Headers / Record<string, any>—否
      method设置上传请求方法string'post'否
      multiple是否支持多选文件booleanfalse否
      data上传时附带的额外参数Record<string, any>—否
      name上传的文件字段名string'file'否
      with-credentials支持发送 cookie 凭证信息booleanfalse否
      show-file-list是否显示已上传文件列表booleantrue否
      drag是否启用拖拽上传booleanfalse否
      accept接受上传的文件类型string—否
      on-preview点击文件列表中已上传的文件时的钩子(uploadFile: UploadFile) => void—否
      on-remove文件列表移除文件时的钩子(uploadFile: UploadFile, uploadFiles: UploadFiles) => void—否
      on-success文件上传成功时的钩子(response: any, uploadFile: UploadFile, uploadFiles: UploadFiles) => void—否
      on-error文件上传失败时的钩子(error: Error, uploadFile: UploadFile, uploadFiles: UploadFiles) => void—否
      on-progress文件上传时的钩子(evt: UploadProgressEvent, uploadFile: UploadFile, uploadFiles: UploadFiles) => void—否
      on-change文件状态改变时的钩子，添加文件、上传成功和上传失败时都会被调用(uploadFile: UploadFile, uploadFiles: UploadFiles) => void—否
      on-exceed当超出限制时，执行的钩子函数(files: File[], uploadFiles: UploadUserFile[]) => void—否
      before-upload上传文件之前的钩子，参数为上传的文件， 若返回false或者返回 Promise 且被 reject，则停止上传。(rawFile: UploadRawFile) => Awaitable—否
      before-remove删除文件之前的钩子，参数为上传的文件和文件列表， 若返回 false 或者返回 Promise 且被 reject，则停止删除。(uploadFile: UploadFile, uploadFiles: UploadFiles) => Awaitable<boolean>—否
      file-list / v-model:file-list默认上传文件UploadUserFile[][]否
      list-type文件列表的类型'text' / 'picture' / 'picture-card''text'否
      auto-upload是否自动上传文件booleantrue否
      http-request覆盖默认的 Xhr 行为，允许自行实现上传文件的请求(options: UploadRequestOptions) => XMLHttpRequest / Promise<unknown>—否
      disabled是否禁用上传booleanfalse否
      limit允许上传文件的最大数量number—否

      Upload插槽

      插槽名描述类型
      default自定义默认内容，如果有trigger插槽，那么default就和tip在同一个位置，否则default插槽将代替trigger插槽—
      trigger触发文件选择框的内容—
      tip提示说明文字—

      Upload方法

      名称描述类型
      abort取消上传请求(file: UploadFile) => void
      submit手动上传文件列表() => void
      clearFiles清空已上传的文件列表（该方法不支持在 before-upload 中调用）(status?: Array) => void