Enviar Arquivos para Servidor

O objetivo deste artigo é mostrar como enviar arquivos do navegador para o servidor. No front-end eu vou utilizar o Vue.js e no back-end Node.js.

Será um exemplo muito simples e rápido. Então vamos ao que interessa.

Front-end com Vue.js

Em projeto com Vue.js configurado, você adiciona o seguinte código:

<template>
  <div>
    <input type="file" name="file" multiple ref="files" />
    <button @click="sendFile">Send</button>
  </div>
</template>

<script>
export default {
  name: 'App',
  methods: {
    async sendFile() {
      let dataForm = new FormData();
      for (let file of this.$refs.files.files) {
        dataForm.append(`file`, file);
      }
      let res = await fetch(`http://localhost:3000/upload`, {
        method: 'POST',
        body: dataForm,
      });
      let data = await res.json();
      console.log(data);
    },
  },
};
</script>

Basicamente temos um input do tipo file e um botão que enviará os arquivos. Perceba que no "input" temos um atributo ref para termos acesso ao objeto do DOM, vale destacar que esse é um recurso do Vue.js.

Outro detalhe importante é que estamos enviando o arquivo para servidor por Ajax, usando a função fetch e o classe FormData.

Neste exemplo eu não usei um form para fazer a requisição ao servidor para evitar que nossa página seja atualizada (reload). Talvez em outras situações isso seja necessário, mas com Vue.js eu prefiro uma abordagem diferente.

Back-end com Node.js

Agora vamos contruir o aplicativo de back-end para receber essa requisição. Vou fazer com Node.js, mas você pode fazer com qualquer outra linguagem ou framework.

Para este exemplo utilizarei Express.js como servidor HTTP e o Multer como middleware para trabalhar com arquivos binários. A propósito também utilizei a biblioteca CORS para evitar problemas com Cross-Origin Resource Sharing.

npm install express --save
npm install multer --save
npm install cors --save

Agora adicione o arquivo index.js:

let express = require('express');
let cors = require('cors');
let multer = require('multer');

let upload = multer({ dest: './uploads/' });
let app = express();
app.use(cors());

app.post('/upload', upload.array('file'), async (req, res) => {
  res.send({ upload: true, files: req.files });
});

let port = process.env.PORT || 3000;
app.listen(port, () => {
  console.log(`Example app listening at http://localhost:${port}`);
});

Mais uma vez temos um exemplo muito simples, onde subimos um servidor HTTP com apenas uma rota (POST /upload).

Veja que precisamos declarar na rota o nome do parâmetro que contêm os arquivos. Também declaramos que será um Array, uma vez que vários arquivos podem ser enviados em apenas uma requisição.

Todos os arquivos enviados serão gravados na pasta ./uploads e você tem acesso ao nome dos arquivos por meio da variável req.files.

Para mais detalhes sobre a biblioteca Multer, clique aqui para ver a documentação.

Por fim

Por fim, quero destacar que neste exemplo eu utilizei as seguintes versões:

• Vue.js: 2.6
• Node.js: 12.18
• Express.js: 4.17
• Multer: 1.4
• Cors: 2.8

Dúvidas ou sugestões é só entrar em contato. Abraço.