跳到主要内容

Upload

The upload component is used to allow users to upload files from their local machines to any cloud storage via API. Next, we will introduce how to configure an upload component, how to associate the upload component with a cloud storage service, how to use the upload component to select an image, and display it with an image, etc.

Properties

PropertyDescription
TypeSet the type of upload component, including Button and Dropzone.
TextThe text shown on the upload component.
Selection typesSet the selection type to multiple files, single file, or directory.
File typesA list of file extensions allowed to upload. No value will permit all file types.
Append newly selected filesTo set the selected new file to append to the selected file or replace the selected file in the selection type of multiple files or directory.
File listTo set whether to show a list of selected files below the upload component. The height of uploader will change dynamically based on the length of the file list.
Parse ValueAttempt to parse the selected files, with support for JSON, CSV, TSV, Excel, and TXT files. Parsed data can be accessed via {{upload1.parsedValue}}. Files that can not be parsed will be null in the array. All files are available as base64 encoded strings on the value array, regardless of this option.
LoadingWhether the component should show a loading indicator.
DisabledTo set whether to disable this component and under what conditions to disable it. For example, if the input1 component is null, this component should be disabled: {{ input1.value == ‘ ’}}
TooltipA tooltip displayed on the component when users hover over the component.
Required fieldTo set whether it is required.
Min sizeTo set the minimum file size allowed to be added.
Max sizeTo set the maximum file size allowed to be added.
Custom ruleTo set the text displayed when verification fails.
Hide validation messageTo set whether to display the validation message when verification fails.
Form Data KeyTo set a key for the component. After adding this component to a form, this key will be used to identify the data of this component when submitting the form.
HiddenTo set whether to display this component and under what conditions to display it. For example, if the current user is not User A, this component should be hidden: {{ currentUserInfo.nickname != 'User A' }}
VariantTo set the Button Upload component to Outline or Filled.
Theme colorTo set the color of the Button Upload component.

Method

You can use other components to control the Upload component. We support the following three methods:

clearValidationUsed to clear the validation message
clearValueUsed to clear the selected
setDisabledUsed to set the upload component to disabled or enabled

Event handler

To trigger actions when the selected files change

Data of Uploader

The upload component has some commonly used data, which can be called in the app.

value an array consisting of the base64 data of files.

files an array of objects. The keys of the objects include lastModified, name, size, type. You can use {{upload1.files.map(file =>file.name)}} to get an array of file names and you can also get lastModified array, size array, type array in the same way.

Upload files to a cloud storage service

Upload a single file through an S3 resource

The configuration of action is as follows.

Upload object name

{{upload1.files.map(file =>file.name)[0]}}

Upload data

{{upload1.value[0]}}

Upload multiple files through an S3 resource

Upload object name list

{{upload1.files.map(file =>file.name)}}

Upload data list

{{upload1.value}}

Upload an image and display it on the image component Change the image source to the file base64 data of upload component. The base64 data is stored in the value attribute in array. And we should splice the file prefix with the file data. The code is as follows.

{{'data:image/jpeg;base64,'+upload1.value[0]}}