VEUI

VEUI on GitHub
中文

Uploader

Demos

File upload

Set the type prop to file to use the file upload mode.

Normal size

  • demo-file1.txt
  • demo-file2.txt

Small size

  • demo-file1.txt
  • demo-file2.txt
Edit this demo on GitHubEdit
<template>
<article>
  <section>
    <h4>Normal size</h4>
    <veui-uploader
      v-model="files"
      action="https://app.fakejson.com/q/ELymQ7xh?token=AWFkjMICPSAB_bO_z-Lnog"
    />
  </section>
  <section>
    <h4>Small size</h4>
    <veui-uploader
      v-model="files2"
      action="https://app.fakejson.com/q/ELymQ7xh?token=AWFkjMICPSAB_bO_z-Lnog"
      ui="s"
    />
  </section>
</article>
</template>

<script>
import { Uploader } from 'veui'
import { cloneDeep } from 'lodash'

export default {
  components: {
    'veui-uploader': Uploader
  },
  data () {
    let files = [
      {
        name: 'demo-file1.txt',
        src: '/file/demo-file1.txt',
        key: 0
      },
      {
        name: 'demo-file2.txt',
        src: '/file/demo-file2.txt',
        key: 1
      }
    ]
    return {
      files,
      files2: cloneDeep(files)
    }
  }
}
</script>

<style lang="less" scoped>
article {
  display: flex;
}

section {
  width: 45%;
}
</style>

Image upload

Set the type prop to image to use the image upload mode.

Normal size

  • Normal size

Small size

  • Small size
Edit this demo on GitHubEdit
<template>
<article>
  <section>
    <h4>Normal size</h4>
    <veui-uploader
      v-model="images"
      type="image"
      action="https://app.fakejson.com/q/ELymQ7xh?token=AWFkjMICPSAB_bO_z-Lnog"
    >
      <template #desc>
        Normal size
      </template>
    </veui-uploader>
  </section>
  <section>
    <h4>Small size</h4>
    <veui-uploader
      v-model="images2"
      type="image"
      action="https://app.fakejson.com/q/ELymQ7xh?token=AWFkjMICPSAB_bO_z-Lnog"
      ui="s"
    >
      <template #desc>
        Small size
      </template>
    </veui-uploader>
  </section>
</article>
</template>

<script>
import { Uploader } from 'veui'
import { cloneDeep } from 'lodash'

export default {
  components: {
    'veui-uploader': Uploader
  },
  data () {
    let images = [
      {
        src: '/images/development/uploader/demo-image1.jpg',
        key: 0
      },
      {
        src: '/images/development/uploader/demo-image2.jpg',
        key: 1
      }
    ]
    return {
      images,
      images2: cloneDeep(images)
    }
  }
}
</script>

API

Props

NameTypeDefaultDescription
uistring=-

Style variants.

ValueDescription
sSmall.
mMedium.
typestring'file'

The type of the uploader.

ValueDescription
fileFile upload.
imageImage upload.
valueObject | Array<Object>-

Returns an array of file objects when multiple is true. When max-count is set to a value greater than 1, then multiple treated as true.

The type of single file is {name: string, src: string, ...}, and fields added inside convert-response.

key-fieldstring'key'Used to specify a unique key for the file object, as a basis for correctly handling the order of the file list when the data changes.
namestring'file'The name of native <input> elements.
actionstring-Upload URL.
headersObjectuploader.headersExtra HTTP headers. Can be globally configured.
with-credentialsbooleantrueThe same as the withCredentials option of XMLHttpRequest.
request-modestringuploader.requestMode

The request mode of the uploader. Can be globally configured.

ValueDescription
xhrUpload with XMLHttpRequest.
iframeUpload with <iframe>.
iframe-modestringuploader.iframeMode

To specify the callback mode when request-mode is iframe. Can be globally configured.

ValueDescription
postmessageCallback with PostMessage.
callbackCallback with callback functions registered according to callback-namespace on window.
callback-namespacestringuploader.callbackNamespaceThe namespace of the callback function when request-mode is 'iframe' and iframe-mode is 'callback', will be placed under the window object. Can be globally configured.
data-typestring'json'

To specify the data type in order to parse the callback value if it's text content. Can be left empty if callback value is Object.

ValueDescription
jsonThe callback text is JSON.
textThe callback text is plain text.
convert-responseuploader.convertResponse-

Converts response data to standard format that can be consumed by the uploader, in order to allow the uploader to display upload result. The parameter is the callback data. The type of the return value must conform to the following:

PropertyTypeDescription
successbooleanWhether the upload succeeded.
namestring=The name of the file. Required when success is true.
srcstring=The location of the file. Required when success is true.
messagestring=Error message when upload fails. Required when success is false.

Additional fields can be added to the response data. These data fields will be included in the value prop and parameter of callbacks change, success, failure, remove and progress events. Can be globally configured.

acceptstring-The same as the accept attribute of native <input> elements. Works as an extra layer of validation on top of browsers' file filter. Will skip validation when MIME type doesn't match file extension, eg. application/msword.
max-countnumber-The maximum file count.
max-sizenumber | string-The maximun size of a single file. When being a number, the unit will be byte. When being a string, units can be added after numbers, including b / kb / mb / gb / tb.
payloadObject-The extra data payload to be sent together with the file.
progressstring'text'

To specify how to display progress when request-mode is xhr.

ValueDescription
textDisplays as status text.
numberDisplays the progress as percentage.
barDisplays th progress as a progress bar.
autouploadbooleantrueWhether to start upload as soon as a file is selected.
orderstringasc

The order of displaying uploaded files according to start time.

ValueDescription
ascAscending order.
descDescending order.
uploadfunction(Object, Object): function-

Customizing the upload process in case the value of request-mode is 'custom', the first parameter is the native File object and the second parameter is the object that contains callback functions associated with the upload process, with the following properties.

PropertyTypeDescription
onloadfunctionThe upload completion callback function whose arguments is the same as the convert-response prop's return value.
onprogressfunctionThe callback function for upload progress, the parameter type being { loaded: number, total: number }, loaded is the number of bytes that have been uploaded, and total is the total number of bytes in the file.
oncancelfunctionThe callback to the component when the custom upload is actively cancelled, no parameters.
onerrorfunctionThe callback for upload error, the parameter type is { message: string } and message is the error message.

If upload returns a function, it will be called when the user cancelled proactively or the upload component is destroyed, to abort the custom upload process.

controlsfunction(Object, Array<Object>): Array<Object>-

In image upload mode, it is used to customize the actions on the floating toolbar. The parameter types are (file: Object, defaultControls: Array<Object>), where file is the file related information and defaultControls is the array containing the default actions. It can return an array of different actions depending on the file state. The specific properties for each action item are as follows.

PropertyTypeDescription
namestringThe name of the action item. When the button is clicked, an event with the same name will be emitted, with (file: Object, index: number) as the callback parameter, file is the file object that triggered the event, and index is the number of the file in the list.
iconstringThe icon of the action item.
disabledboolean=Whether the action item is disabled. If this property is undefined, the disabled state of the action item follows the disabled state of the component.

Slots

NameDescription
button-label

The content in the upload button.

Default content: file upload for prompt to select a file, and image upload for upload image icon.

uploadThe area of the upload button in image upload mode.
descThe content of the prompt for the number, format, size, etc. of files.
file

Single file area to customize the file content.

nametypedescription
namestringThe name of the file.
srcstringThe address of the file.
statusstringThe status of the file. 'success' means the upload was successful; 'uploading' means the upload is in progress; 'failure' means the upload failed.
indexnumberThe number of the file in the list.
file-beforeThe area before the contents of a single file. The scope argument is the same as the file slot.
file-afterThe area after the contents of a single file. The scope argument is the same as the file slot.
uploadingThe area of a single image being uploaded in image upload mode. The scope argument is the same as the file slot.
failureThe area of a single image that failed to upload in image upload mode. The scope argument is the same as the file slot.

Events

NameDescription
change

Triggers when upload succeeded or a file is removed. The callback parameter list is (value).

NameTypeDescription
valueObject | Array<Object>The value of the component.
remove

Triggered when a file is removed. The callback parameter list is (file, index).

NameTypeDescription
fileObjectThe removed file object.
indexnumberThe index of the removed file.

file properties

NameTypeDescription
namestringThe name of the file.
srcstringThe location of the file.
statusstringThe status of the upload process. Can be one of 'success' / 'uploading' / 'failure'.

Fields added from convert-response are also available.

successTriggers when upload succeeded. Shares the same callback parameter list with the remove event.
failureTriggers when upload failed. Shares the same callback parameter list with the remove event.
invalid

Triggered when file validation fails. The callback parameter list is (validity: Object).

NameTypeDescription
fileObjectThe information about the file that failed the validation, being the same type as file in the callback parameter of the remove event. This property is empty if the validation fails because the number of files selected exceeds the max-count limit.
errorsArray<Object>Array of all the validation error messages of the file, each item in it is an object that contains validation failure information.
NameTypeDescription
typestringThe type of validation error, whose enum value can be accessed from the Uploader.errors object, eg. Uploader.errors.SIZE_INVALID.
valuenumber | string | ObjectThe value that doesn't pass validation, can be different types depending on the type property.
messagestringThe validation error message.
typedescriptionvalue typevalue description
TYPE_INVALIDFile type validation failure.stringFile name.
SIZE_INVALIDFile size validation failure.numberFile size in bytes.
TOO_MANY_FILESThe number of selected files exceeds the max-count limit.numberNumber of files selected.
CUSTOM_INVALIDCustom validation failure returned by validator prop.ObjectFile object, same as remove event callback parameter.
statuschange

Triggered when the status of the entire uploader changes. The callback parameter list is (status: string).

ValueDescription
emptyNo file is selected.
uploadingAt least one file is being uploaded.
failureAny file is not being successfully uploaded.
successAll files are successfully uploaded.
progress

Triggered when upload progress updated, when request-mode is 'xhr'. The callback parameter list is (file, index, event).

NameTypeDescription
fileObjectSame as the file parameter of the callback for the remove event.
indexnumberThe index of the file being uploaded.
eventEventNative upload progress event object.

Configs

KeyTypeDefaultDescription
uploader.requestModestring'xhr'Same as the request-mode prop.
uploader.iframeModestring'xhr'Same as the iframe-mode prop.
uploader.callbackNamespacestring'veuiUploadResult'Same as the callback-namespace prop.
uploader.headersObject-Same as the headers prop.
uploader.convertResponsefunction(Object): Object-Same as the convert-response prop.

Icons

NameDescription
uploadUpload file.
clearRemove file.
successUpload succeeded.
redoRetry upload.
fileFile.
addAdd file.
alertValidation failure alert.
Edit this page on GitHubEdit
© Baidu, Inc. 2023