1

Estou tentando fazer o upload de um formulário com foto mas não estou conseguindo já tentei de tudo, estou usando react.js no front e no back spring boot

Aqui esta o código no react:

if (checkBtn.current.context._errors.length === 0) {
    
    var formData = new FormData();
    
    var carro = {
              id : id,
             nome: nome,
              marca: marca,
              modelo : modelo,
              foto : foto,
              valor:valor
    }     
  
   formData.append('carro',JSON.stringify(carro));
   formData.append("imagem",image); 

   AuthService.create(formData).then((
    
        res => {
        console.log(res);
         setLoading(false);
         setSuMessage(res);
        
    }

Aqui eu envio o form para o backend:

const create = (formData) => {
    
const token = localStorage.getItem('user').replace(/^"(.*)"$/, '$1');
const config = {
    headers: {
      'Authorization': 'Bearer ' + token,
      
              
    }
  }
  
 

return axios.post(API_URL + "/admin/car",{formData},config);

Aqui está o back:

 @PostMapping(value="/admin/car", consumes= {MediaType.APPLICATION_JSON_VALUE,   MediaType.MULTIPART_FORM_DATA_VALUE})  
public ResponseEntity<String> save(@RequestPart("carro")  Carro carro ,@RequestPart("imagem")  MultipartFile imagem )

Abaixo esta o erro que recebo:

org.apache.tomcat.util.http.fileupload.impl.InvalidContentTypeException: the request doesn't contain a multipart/form-data or multipart/mixed stream, content type header is application/json

Já tentei de tudo e não consigo fazer o upload , abaixo vou deixar meu pom

<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 https://maven.apache.org/xsd/maven-4.0.0.xsd">
<modelVersion>4.0.0</modelVersion>
<parent>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-parent</artifactId>
    <version>2.6.2</version>
    <relativePath /> <!-- lookup parent from repository -->
</parent>
<groupId>com.verzel</groupId>
<artifactId>vitrine</artifactId>
<version>0.0.1-SNAPSHOT</version>
<name>com.verzel.vitrine</name>
<description>Projeto de api backend para a empresa verzel </description>
<properties>
    <java.version>11</java.version>
</properties>
<dependencies>
    <dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-data-jpa</artifactId>
    </dependency>
    
             

<dependency>
    <groupId>com.fasterxml.jackson.core</groupId>
    <artifactId>jackson-databind</artifactId>
   <version>2.12.4</version>
    
</dependency>
    
    <dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-web</artifactId>
    </dependency>

    <dependency>
        <groupId>mysql</groupId>
        <artifactId>mysql-connector-java</artifactId>
        <scope>runtime</scope>
    </dependency>
    <dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-test</artifactId>
        <scope>test</scope>
    </dependency>



    <!-- Dependencia do Spring Security -->
    <dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-security</artifactId>
    </dependency>


    <!-- Exemplo gringo do github -->
    <dependency>
        <groupId>io.jsonwebtoken</groupId>
        <artifactId>jjwt</artifactId>
        <version>0.9.1</version>
    </dependency>

    <!-- Dependencia do validation -->
    <dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-validation</artifactId>
    </dependency>

    <dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-devtools</artifactId>
    </dependency>
</dependencies>

<build>
    <plugins>
        <plugin>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-maven-plugin</artifactId>
        </plugin>

        <plugin>
            <groupId>org.apache.maven.plugins</groupId>
            <artifactId>maven-resources-plugin</artifactId>
            <version>3.1.0</version>
        </plugin>
    </plugins>
</build>

2 Respostas 2

1

A resposta do Gabriel for perfeita, no Spring eu precisei alterar a assinatura do método e o consumo ficando assim:

 @PostMapping(value="/admin/car")   
    public ResponseEntity<String> save(String carro ,  MultipartFile imagem ){

0

Seu erro provavelmente esta ao realizar a requisição, mais precisamente nesse trecho:

return axios.post(API_URL + "/admin/car",{formData},config);

Você esta passando um objeto no seguinte formato: { formData: formData }, dessa forma o axios vai interpretar que o conteúdo dessa requisição é um application/json ao inves de um multipart/form-data.

Basta passar diretamente o formData

return axios.post(API_URL + "/admin/car",formData,config);

Dessa forma o próprio axios vai entender o tipo de requisição e atribuir os headers corretos.

1
  • 1
    Gabriel perfeito, muito obrigado consegui resolver com a sua ajuda. 20/01/2022 às 14:37

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 .