Fórum Como exibir as imagens em ReactJs cujo a mesma esta arquivada em um sistema de rede Linux? [ReactJs/GraphQl] #616462

10/08/2021

Estou convertendo um sistema FORMS para web, utilizando ReactJs e GraphQl, ocorre que em uma das telas a ser convertida deve exibir/inserir imagens, o problema é que as imagens que estão sendo exibidas localizadas em um servidor Linux da rede e o caminho não está retornando nada.
**A pasta do projeto está localizada em um servidor diferente e do Windows.*

Tentei me basear em outro código, de um desenvolvedor que não está mais no projeto, que é utilizado para buscar relatórios nesse servidor Linux, JasperUtil.java :

/***
         * Retorna caminho relativo a sub-diretório dentro da pasta arquivos / sistemas da rede.
         *
         * @param parametersMap
         * @param subDir
         * @param relativeFile
         * @return Caminho relativo ou null caso não seja um caminho dentro da hierarquia do sub-diretório arquivos/subDir.
         */
        public static File getArquivo(Map<String, Object> parametersMap, String subDir, String relativeFile)
        {
            if (relativeFile == null)
                return null;
 
            File dir = new File((String) parametersMap.get("ARQUIVOS_DIR"), subDir);
            File file = new File(dir, relativeFile.replace('\', '/'));
 
            if (!FileUtil.isSubPath(dir, file))
                throw new RuntimeException(String.format("Arquivo %s não é filho de %s.", file, dir));
 
            return file;
        }
    }

Como exibir as imagens em ReactJs cujo a mesma esta arquivada em um sistema de rede Linux?
Estou no escuro com essa situação, busquei na internet várias formas mas não encontrei nada parecido.
Em outras telas que buscam imagens/anexos dentro do projeto, utilizamos da seguinte forma:

Back-end, exemplo processo-exemplo-anexo.yml

types:
  ProcessoExemploAnexo:
    parameters:
      - name: codigos
        type: Integer[]
        batchField: codigo
      - name: proexeCodigos
        type: Integer[]
        batchField: proexeCodigo
      - name: tipo
        type: String
      - name: where
        type: String
        expression: |
          concatSql(
              andInList("projudane.codigo", $P),
              andInList("projudane.proexe_codigo", $P),
              $P.mapNonAbsent("and proexeane.tipo = $$P").orElse("")
          )
    query: |
      select proexeane.codigo,
             proexeane.caminho_arquivo nome,
             proexeane.proexe_codigo "proexeCodigo"
        from processo_exemplo_anexo proexeane
        where 1 = 1
              $P!
    queryFields:
      codigo:
        type: Integer
      nome:
        type: String
      proxeCodigo:
        type: Integer
        internal: true
 
inputTypes:
  ProcessoExemploAnexoInput:
    fields:
      codigo:
        type: Integer
      nome:
        type: String
      fileUpload:
        type: FileUpload
 
  FileUpload:
    javaType: mm.api.model.sis.FileUpload
    fields:
      id:
        type: String
      contentType:
        type: String
      fileSize:
        type: Long
      submittedFileName:
        type: String

Front-end

interface AnexosProps {
    model: RecordType;
}
 
const Anexos = namedObserver('Anexos', (props: AnexosProps) => {
    const deleteAnexo = action((index: number) => {
        const anexo = props.model.processosExemplosAnexos[index];
 
        if (anexo.codigo) {
            if (!props.model.anexosDelete)
                props.model.anexosDelete = [];
 
            props.model.anexosDelete.push(anexo.codigo)
        }
 
        props.model.processosExemplosAnexos.splice(index, 1);
    });
 
    const insertAnexos = action((fileList: FileList) => {
        Array.from(fileList).forEach(file => props.model.processosExemplosAnexos.push({
            codigo: null,
            nome: file.name,
            fileUpload: file
        }));
    });
 
    return (
        <React.Fragment>
            {props.model.processosExemplosAnexos.map((anexo: typeof props.model.processosExemplosAnexos[number], index) =>
                <p key= style={{ lineHeight: '1.5em' }}>
                    <a href={anexo.url}>{anexo.nome}</a>
 
                    {props.model.status == 'P' &&
                        <span
                            className='fa fa-trash-alt'
                            style={{ cursor: 'pointer', marginLeft: '0.7em' }}
                            title='Excluir'
                            onClick={() => deleteAnexo(index)}
                        />
                    }
                </p>
            )}
            <br />
 
            <UploadButton
                style={props.model.processosExemplosAnexos?.length > 0 ? { marginTop: '1em' } : undefined}
                disabled={props.model.status != 'P' }
                multiple
                onSelected=
            >
                Adicionar Imagem
            </UploadButton>
        </React.Fragment>
    );
});

Busco exemplos para seguir.

$Sadjskabncm S\c$

Sadjskabncm S\c

Curtir tópico

+ 0

Responder