3

Estou fazendo uso de um projeto do GitHub (xkeshi/image-compressor) que comprime imagens usando JavaScript. Ele gera um download do arquivo comprimido com o seguinte link por exemplo blob:http://localhost/945f825f-054a-4170-9d79-ac1dba593d23

Note que o URL começa com blob:

Como fazer upload com PHP do arquivo para o servidor, já que aparentemente o arquivo está local?

Dados:

Projeto do GitHub que originou pergunta: https://github.com/xkeshi/image-compressor

O que eu já tentei

<?php
//Arquivo que desejo fazer upload blob:http://localhost/945f825f-054a-4170-9d79-ac1dba593d23
$url = 'blob:http://localhost/945f825f-054a-4170-9d79-ac1dba593d23';
$img = '/p/a.jpg';
file_put_contents($img, file_get_contents($url));
?>

Erro que apresenta

Warning: file_get_contents(blob:http://localhost/945f825f-054a-4170-9d79-ac1dba593d23): failed to open stream: Invalid argument in C:\xampp\htdocs\1\a\b\docs\p.php on line 5


Warning: file_put_contents(/p/a.jpg): failed to open stream: No such file or directory in C:\xampp\htdocs\1\a\b\docs\p.php on line 5

3
  • o teu problema está no caminho da imagem que forneces como parâmetro
    – 13dev
    Commented 6/08/2018 às 11:28
  • 1
    Considere adicionar o trecho do código que você esta usando/instanciando a biblioteca. Fica difícil imaginar como você obteve um objectURL uma vez que a biblioteca só retorna File ou Blob Commented 8/08/2018 às 10:45
  • Bom, agora entendi de onde você tirou este objectURL...você tirou isto da página DEMO. Note que o repositório não é publico, o mantenedor usa Vue e o que ele faz é usar a biblioteca para gerar o Blob() e usa URL.createObjectURL() para gerar este link e atribuir a um elemento <a> com o atributo download. Você deveria considerar a resposta que lhe foi apresentada, é a maneira mais recomendada de fazer o upload do objeto que a biblioteca lhe retorna. Commented 8/08/2018 às 15:24

1 Resposta 1

6
+50

O protocolo blob ou Object-URLs somente podem ser gerados pelo browser e essas URL's só podem ser acessadas/gerenciados na mesma instância/sessão, do browser, que os gerou.

Logo, fica evidente que o PHP não tem acesso a URL criada.

Por outro lado, você pode enviar o arquivo criado pela biblioteca xkeshi/image-compressor via ajax (XMLHttpRequest).

Veja o exemplo no manual:

new ImageCompressor(file, {
    quality: .6,
    success(result) {
        const formData = new FormData();

        formData.append('file', result, result.name);

        // Envia a imagem comprimida ao servidor usando XMLHttpRequest.
        axios.post('/path/to/upload', formData).then(() => {
            console.log('Upload success');
        });
    },
    error(e) {
        console.log(e.message);
    },
});

Feito isso, basta você salvar o arquivo enviado no PHP, de forma similar ao salvar um upload normal.

Fazer upload de arquivo com AJAX

POST method uploads

9
  • Me corrija se eu estiver errado más, neste exemplo o arquivo esta vindo de um <input type="file"> que é do sistema de arquivos do usuário e não de um blob? Commented 8/08/2018 às 4:36
  • 2
    @LauroMoraes minha vez de me corrigir, achei que você era o autor da pergunta. Se você quiser baixar o arquivo comprimido, pode-se utilizar a promise retornada, obter a URL gerada e iniciar o download. Acredito que este tenha sido o ponto de partida do autor da pergunta. Commented 8/08/2018 às 11:23
  • 2
    Mas não é isso que é retornada para o usuário. O objectURL é usado internamente para abastecer uma imagem e um canvas posteriormente (dentro da cadeia de resultados da promises) extrai o dataURI deste canvas converte em buffer e abastece um Blob(). Este sim por sua vez é o que é devolvido como resultado. Veja nas linhas 231 -> 235 Commented 8/08/2018 às 11:24
  • 2
    @LauroMoraes é possível, também, que o autor tenha debugado o código para validar aonde a imagem é criada. Commented 8/08/2018 às 11:29
  • 2
    @RORSCHACH acredito que a pergunta no ar seja, o código proposto resolveu seu problema? Commented 8/08/2018 às 13:25

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .