Uploader 上传

示例

文件上传

设置 type 的值为 file 进入文件上传模式。

选择文件

demo-file1.txt
demo-file2.txt

<template>
<article>
  <veui-uploader
    v-model="files"
    action="https://app.fakejson.com/q/ELymQ7xh?token=AWFkjMICPSAB_bO_z-Lnog"
  />
</article>
</template>

<script>
import Uploader from 'veui/components/Uploader'

export default {
  components: {
    'veui-uploader': Uploader
  },
  data () {
    return {
      files: [
        {
          name: 'demo-file1.txt'
        },
        {
          name: 'demo-file2.txt'
        }
      ]
    }
  }
}
</script>

图片上传

设置 type 的值为 image 进入图片上传模式。

重新上传
重新上传

<template>
<article>
  <veui-uploader
    v-model="images"
    type="image"
    action="https://app.fakejson.com/q/ELymQ7xh?token=AWFkjMICPSAB_bO_z-Lnog"
    ui="horizontal"
  />
</article>
</template>

<script>
import Uploader from 'veui/components/Uploader'

export default {
  components: {
    'veui-uploader': Uploader
  },
  data () {
    return {
      images: [
        {
          src: '/images/content/uploader/demo-image1.jpg'
        },
        {
          src: '/images/content/uploader/demo-image2.jpg'
        }
      ]
    }
  }
}
</script>

API

属性

属性类型默认值描述

type

string

'file'

上传类型。

值	描述
`file`	文件上传。
`image`	图片上传。

value

Object|Array<Object>

`max-count`	字段类型
`1`	`Object`
大于 `1` 或 `null`	`Array<Object>`

每个文件对象的类型为 {name: string, src: string, ...}，以及在 convert-response 中自定义添加的字段。

name string 'file' 原生 <input> 元素的 name。

action string - 上传地址。

headers Object uploader.headers 需要加入 HTTP 请求头的内容。可进行全局统一配置。

with-credentials boolean true 同 XMLHttpRequest 的 with-credentials 属性。

request-mode

string

uploader.requestMode

指定异步上传方式。可进行全局统一配置。

值	描述
`xhr`	通过 `XMLHttpRequest` 上传。
`iframe`	通过 `<iframe>` 上传。

iframe-mode

string

uploader.iframeMode

指定在 request-mode 的值为 iframe 的模式下，上传成功后的回调方式。可进行全局统一配置。

值	描述
`postmessage`	通过 `PostMessage` 回调。
`callback`	通过调用 `window` 的 `callback-namespace` 里的回调函数回调。

callback-namespace string uploader.callbackNamespace 在 request-mode 的值为 'iframe' 并且 iframe-mode 的值为 'callback' 的模式下，指定回调函数的命名空间，放在 window 对象下。可进行全局统一配置。

data-type

string

'json'

如果回调的值是文本, 指明文本的解析方式。如果回调的数据是 Object，则 data-type 可以为空。

值	描述
`json`	回调的文本是 JSON。
`text`	回调的文本是普通文本。

convert-response

uploader.convertResponse

将回调数据转换成需要的格式的函数，使组件能够判断上传是否成功以便显示相应结果，参数是回调数据。返回结果的格式要求如下：

字段	类型	描述
`success`	`boolean`	表示上传是否成功。
`name`	`string=`	文件的名称。`success` 为 `true` 时必须。
`src`	`string=`	文件的地址。`success` 为 `true` 时必须。
`message`	`string=`	上传失败时的出错信息。`success` 为 `false` 时必须。

还可以给返回结果加上其它自定义的属性，这些自定义属性会被包含在 value 以及 change、success、failure、remove、progress 事件的回调参数 file 中。可进行全局统一配置。

accept string - 与原生 <input> 元素的 accept 相同，在浏览器的文件类型筛选后再加一层校验。对于类似 application/msword 这样的 MIME type 与扩展名对不上的情形跳过校验。

extensions Array<string> ['jpg', 'jpeg', 'gif', 'png', 'bmp', 'tif', 'tiff', 'webp', 'apng', 'svg'] 如果 accept 的值是类似 'image/*' 这样的形式，可以指定能通过校验的所有的扩展名。

ui

string

预设样式。

值	描述
`horizontal`	横向排列。

max-count number - 最大文件数量。

max-size number|string - 单个文件的最大大小，如果是 number，单位是 byte；如果是 string，支持在数字后面添加单位，单位可以是 b/kb/mb/gb/tb。

payload Object - 附带在上传请求中的额外参数。

progress

string

'text'

指定在 request-mode 的值为 xhr 的模式下，上传的进度的显示方式。

值	描述
`text`	显示提示文字。
`number`	显示上传进度百分比。
`bar`	显示上传进度条。

autoupload boolean true 指定是否在选完文件后立刻上传。

order

string

asc

上传文件的显示顺序，按照开始上传的时间排序。

值	描述
`asc`	升序排列。
`desc`	降序排列。

插槽

名称描述

button-label

上传文件的按钮里的内容。

默认内容：提示选择文件。

desc 对文件数量、格式、大小等的提示内容。

type-invalid

文件类型没有通过校验时的警告内容。

默认内容：提示文件的类型不符合要求。

size-invalid

文件大小没有通过校验时的警告内容。

默认内容：提示文件的大小不符合要求。

count-overflow

文件的数量超过限制时的警告内容。

默认内容：提示文件的数量超过限制。

success-label

上传成功后的提示内容。

默认内容：提示上传成功。

failure-label

上传失败后的提示内容。

默认内容：提示上传失败。

uploading-label

上传过程中，并且 progress 的值是 text 的时候的提示内容。

默认内容：提示上传中。

file

单个文件的区域，用来定制文件内容。

名称	类型	描述
`name`	`string`	文件的名称。
`src`	`string`	文件的地址。
`status`	`string`	文件的状态。`'success'` 表示上传成功；`'uploading'` 表示正在上传；`'failure'` 表示上传失败。
`index`	`number`	文件在列表中的序号。

file-before 单个文件内容之前的区域。作用域参数与 file 作用域插槽相同。

file-after 单个文件内容之后的区域。作用域参数与 file 作用域插槽相同。

extra-operation 在图片上传模式下，提供放置额外的操作组件的区域，例如放置自定义功能的按钮。作用域参数与 file 作用域插槽相同。

事件

名称描述

change

只在上传成功、删除文件时触发，回调参数为 (value)。

名称	类型	描述
`value`	`Object\|Array<Object>`	组件的 `value` 的值。

remove

删除文件时触发，回调参数为 (file, index)。

名称	类型	描述
`file`	`Object`	被删除的文件。
`index`	`number`	被删除的文件的序号。

file 字段详情

字段	类型	描述
`name`	`string`	文件名称。
`src`	`string`	文件地址。
`status`	`string`	上传状态。`'success'` 表示上传成功；`'uploading'` 表示正在上传；`'failure'` 表示上传失败。

同时也包含在 convert-response 中添加的自定义属性。

success 上传成功时触发，回调参数与 remove 事件的回调参数相同。

failure 上传失败时触发，回调参数与 remove 事件的回调参数相同。

statuschange

在所有文件总的状态发生变化时触发，回调参数为组件整体的状态 (status: string)。

值	描述
`empty`	没有选择任何文件上传。
`uploading`	有任一文件正在上传中。
`failure`	有任一文件上传失败。
`success`	所有文件上传成功。

progress

在 request-mode 的值为 'xhr' 的情况下，在上传进度发生变化时触发，回调参数为 (file, index, event)。

名称	类型	描述
`file`	`Object`	与 `remove` 事件的回调参数中的 `file` 相同。
`index`	`number`	正在上传的文件的序号。
`event`	`Event`	上传进度原生事件。

全局配置

名称	类型	默认值	描述
`uploader.requestMode`	`string`	`'xhr'`	参见 `request-mode` 属性。
`uploader.iframeMode`	`string`	`'postmessage'`	参见 `iframe-mode` 属性。
`uploader.callbackNamespace`	`string`	`'veuiUploadResult'`	参见 `callback-namespace` 属性。
`uploader.headers`	`Object`	-	参见 `headers` 属性。
`uploader.convertResponse`	`function(Object): Object`	-	参见 `convert-response` 属性。

图标

名称	描述
`upload`	上传文件。
`clear`	删除。
`success`	上传成功。
`redo`	重试。
`file`	已上传文件。
`add`	添加文件。
`alert`	校验失败警告。