ILLA home page
  1. Transferir

​

O componente de upload é usado para permitir que os usuários façam upload de arquivos de suas máquinas locais para qualquer armazenamento de nuvem via API. Em seguida, apresentaremos como configurar um componente de upload, como associar o componente de upload com um serviço de armazenamento em nuvem. como usar o componente de upload para selecionar uma imagem e exibi-la com uma imagem, etc.

​
propriedades

PropriedadeDescrição:
tipoDefina o tipo de componente de upload, incluindo Botão e Dropzone.
textoO texto mostrado no componente de upload.
Tipos de seleçãoDefina o tipo de seleção para vários arquivos, arquivo único ou diretório.
Tipos de arquivoUma lista de extensões de arquivo permitidas para upload. Nenhum valor permitirá todos os tipos de arquivo.
Acrescentar arquivos recém-selecionadosPara definir o novo arquivo selecionado para anexar ao arquivo selecionado ou substituir o arquivo selecionado no tipo de seleção de vários arquivos ou diretório.
Lista de arquivosPara definir se deve mostrar uma lista dos arquivos selecionados abaixo do componente de upload. A altura do uploader mudará dinamicamente com base no comprimento da lista de arquivos.
Valor de análiseTente analisar os arquivos selecionados, com suporte para arquivos JSON, CSV, TSV, Excel, e TXT. Dados analisados podem ser acessados via {{upload1.parsedValue}}. Arquivos que não podem ser analisados serão nulos na matriz. Todos os arquivos estão disponíveis como strings codificadas em base64 na matriz de valor, independentemente desta opção.
Carregando…Se o componente deve mostrar um indicador de carregamento.
DesabilitadoPara definir se deseja desativar este componente e em que condições desativá-lo. Por exemplo, se o componente input1 é nulo, este componente deve ser desabilitado: {{ input1.value == ‘ ’}}
DicaUma dica exibida no componente quando usuários passarem o mouse sobre o componente.
Campo obrigatórioPara definir se é necessário.
Min sizePara definir o tamanho mínimo de arquivo permitido para ser adicionado.
Max sizePara definir o tamanho máximo de arquivo permitido para ser adicionado.
Regra personalizadaPara definir o texto exibido quando a verificação falhar.
Ocultar mensagem de validaçãoPara definir se deve exibir a mensagem de validação quando a verificação falhar.
Chave de Dados do FormulárioPara definir uma key para o componente. Depois de adicionar este componente a um formulário, esta chave será usada para identificar os dados deste componente ao enviar o formulário.
HiddenPara definir se deve exibir este componente e em que condições exibi-lo. Por exemplo, se o usuário atual não é o Usuário A, este componente deve ser oculto: {{ currentUserInfo.nickname != ‘User A’ }}
VariantePara definir o componente de Upload do Botão para Outline ou Preenchido.
Cor do temaPara definir a cor do componente de Upload do botão.

​
Método

Você pode usar outros componentes para controlar o componente de upload. Apoiamos os seguintes três métodos:

validacaoUsado para limpar a mensagem de validação
clearValueUsado para limpar os selecionados
definirDesabilitadoUsado para definir o componente de upload para desabilitado ou habilitado

​
Manipulador de eventos

Para acionar ações quando os arquivos selecionados mudam

​
Dados do Upload

O componente de upload tem alguns dados comumente usados, que podem ser chamados no aplicativo.

value um array que consiste dos dados base64 dos arquivos.

files uma matriz de objetos. As chaves dos objetos incluem lastModified, name, size, type. Você pode usar {{upload1.files.map(file =>file. ame)}} para obter um array de nomes de arquivos e você também pode obter o lastModified array, size array, type array do mesmo jeito.

​
Enviar arquivos para um serviço de armazenamento da nuvem

​
Carregar um único arquivo através de um recurso S3

A configuração da ação é a seguinte.

Carregar nome do objeto

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

Enviar dados

{{upload1.value[0]}}

​
Enviar vários arquivos através de um recurso S3

Carregar lista de nomes de objeto

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

Carregar lista de dados

{{upload1.value}}

Envie uma imagem e exiba-a no componente de imagem Altere a fonte da imagem para o arquivo base64 de dados do componente de upload. Os dados base64 são armazenados no atributo de valor na matriz. E devemos cortar o prefixo do arquivo com os dados do arquivo. O código é o seguinte. 

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