4

Estou tentando fazer um upload de imagem usando a biblioteca Axios, mas ela não está chegando no back-end.

Input da imagem

<input type="file" class="custom-file-input" id="file" name="file">

Obs: Meu formulário já está com o enctype="multipart/form-data"

Código JQuery

var formData = new FormData();
var imagefile = document.querySelector('#file');
formData.append("image", imagefile.files[0]);
axios.post('http://localhost:3030/api/admin/employees', {
  cpf,
  formData
}, {
  headers: {
    'Content-Type': 'multipart/form-data'
  }
})
.then(function (response) {
  console.log(response);
});

Node.js retornando os dados

return res.send(req.body);

Retorno da API

config: {
  url: "http://localhost:3030/api/admin/employees",
  method: "post",
  data: "{"cpf":"321.321.321-32","formData":{}}",
  headers: {…}, transformRequest: Array(1), …
}
data: {}
headers: {content-length: "2", content-type: "application/json; charset=utf-8"}
request: XMLHttpRequest {readyState: 4, timeout: 0, withCredentials: false, upload: XMLHttpRequestUpload, onreadystatechange: ƒ, …}
status: 200
statusText: "OK"

Já tentei de muitas formas mas nada está funcionando.

0

1 Resposta 1

9

No Node.js vamos usar um middleware para tratar de arquivos para o tipo multipart/form-data. Eu utilizo o multer.

Para o app.js:

const multer = require("multer");
...
...
let upload = multer();

// Esta é a rota a ser usada pelo 'axios': http://localhost:3000/image-upload.
// O campo 'fileimage' será a chave que o multer irá 
// procurar pelo arquivo de imagem.
app.post("/image-upload", upload.single('fileimage'), (req, res) => {
  console.log(req.body);
  console.log(req.file);
res.status(200).json({ message: "success!" });
});

Agora no seu .js no front-end, vamos ajustar o objeto formData e não iremos passar o campo cpf "solto" junto com o objeto formData, mas sim iremos inserir o cpf dentro do formData:

const formData = new FormData();
const imagefile = document.querySelector("#file");

// 'fileimage' é o campo que o 'multer' procura o arquivo de imagem.
formData.append("fileimage", imagefile.files[0]);
formData.append("cpf", '1234567890'); // cpf junto ao formData.

axios.post("http://localhost:3000/image-upload", formData, {
  headers: {
  "Content-Type": `multipart/form-data; boundary=${formData._boundary}`,
  }
}).then(response => console.log(response));

O parametro boundary serve como recurso para separar chaves de valores quando um formulário for submetido. Algo semelhante ao tipo application/x-www-form-urlencoded onde o servidor sabe que as chaves são separadas por &, como exemplo:

nome=cardeal&cpf=12345678900

Para o tipo multipart/form-data, o boundary tem função similar ao &.

Atenção

Para entidades do tipo multipart, a diretiva boundary é obrigatória.


Feita a requisição, no console.log no terminal do Node.js é esperado o seguinte resultado:

inserir a descrição da imagem aqui

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 .