Implementação de Upload de Imagens no React Native para HarmonyOS NEXT

No desenvolvimento de aplicações React Native voltadas para o ecossistema HarmonyOS NEXT, a ausência de SDKs nativos para serviços de armazenamento em nuvem (como o Alibaba Cloud OSS) exige a adoção de estratégias de upload via Web ou através de APIs intermediárias. A abordagem mais segura e eficiente consiste no envio de dados via formulários Multipart ou conversão de arquivos para processamento no backend.

Seleção de Imagens e Restrições de Hardware

Para a captura e seleção de mídias, a biblioteca react-native-image-picker é amplamente utilizada. Entretanto, em dispositivos HarmonyOS NEXT, observou-se que o processamento de imagens com resoluções superiores a 2000px pode resultar em falhas de memória ou erros internos (HTTP 500 em certos contextos de processamento). Recomenda-se limitar as dimensões da imagem para garantir a estabilidade.

import { launchImageLibrary } from 'react-native-image-picker';

const selecionarMidia = () => {
  const configuracoes = {
    mediaType: 'photo',
    maxWidth: 1500, // Limite de segurança para evitar erros de processamento
    maxHeight: 1500,
    quality: 0.8,
    selectionLimit: 1,
  };

  launchImageLibrary(configuracoes, (resultado) => {
    if (resultado.assets) {
      const { uri, fileName } = resultado.assets[0];
      processarEnvio(uri, fileName);
    }
  });
};

O objeto retornado pela galeria fornece o caminho local (uri) e o nome do arquivo, que são essenciais para a próxima etapa de lietura do sistema de arquivos.

Leitura de Arquivos e Construção do Payload

Como o ambiente HarmonyOS NEXT possui permissões específicas de acesso a arquivos, utilizamos a biblioteca react-native-fs para ler o conteúdo da imagem e convertê-lo em uma string Base64. Esse formato facilita o transporte dos dados binários dentro de um objeto FormData.

import ReactNativeBlobUtil from 'react-native-blob-util'; // Alternativa comum ao RNFS
import FileSystem from 'react-native-fs';

async function enviarImagemParaServidor(caminhoLocal, nomeOriginal) {
  try {
    // Conversão do arquivo local para Base64
    const dadosBase64 = await FileSystem.readFile(caminhoLocal, 'base64');

    const formulario = new FormData();
    // 'imagemBinaria' e 'nomeArquivo' devem coincidir com a expectativa do seu endpoint
    formulario.append('imagemBinaria', dadosBase64);
    formulario.append('nomeArquivo', nomeOriginal);

    const configuracaoRequisicao = {
      method: 'POST',
      headers: {
        'Content-Type': 'multipart/form-data',
      },
      body: formulario,
    };

    const resposta = await fetch('https://sua-api.com/upload', configuracaoRequisicao);
    const dadosRetorno = await resposta.json();

    return dadosRetorno;
  } catch (erro) {
    console.error('Falha no upload:', erro);
    throw erro;
  }
}

Conversão de Base64 para Blob (Opcional)

Caso a sua API exija um formato Blob em vez de uma string Base64 pura, é necessário realizar a decodificação manual dos dados. O exemplo abaixo demonstra como transformar a string Base64 em um objeto Blob compatível com requisições web.

function transformarBase64EmBlob(stringBase64, mimeType = 'image/jpeg') {
  try {
    // Decodifica a string base64 (removendo prefixos se existirem)
    const conteudoLimpo = stringBase64.includes(',') 
      ? stringBase64.split(',')[1] 
      : stringBase64;
      
    const binarioString = atob(conteudoLimpo);
    const tamanho = binarioString.length;
    const arrayBinario = new Uint8Array(tamanho);

    for (let i = 0; i < tamanho; i++) {
      arrayBinario[i] = binarioString.charCodeAt(i);
    }

    return new Blob([arrayBinario], { type: mimeType });
  } catch (e) {
    console.error('Erro na conversão para Blob:', e);
    return null;
  }
}

É fundamental que as chaves de acesso (como AccessKey e Secret) de serviços como o OSS nunca fiquem expostas no código do cliente. A prática recomendada para HarmonyOS NEXT é sempre realizar o upload através de um servidor backend ou utilizar Tokens de Segurança Temporários (STS) se o upload direto for estritamente necessário.

Tags: react-native harmonyos-next image-upload javascript mobile-development

Publicado em 8-30 15:48