Axios: Axios não envia dados de formulário em react-native

Criado em 25 jan. 2018  ·  46Comentários  ·  Fonte: axios/axios

Eu tentei enviar dados de um formulário com axios, mas não consigo, no Chrome Dev Tools nenhum conteúdo aparece na solicitação. Fazendo a mesma solicitação via carteiro a resposta da API normalmente.
js (newData) => { const data = new FormData(); data.append('name', 'raphael'); data.append('file', { uri: newData.image.path, type: 'image/jpeg', name: 'teste' }); return axios.post(`${constants.development.URL_API}/file`, data, headers: { 'Content-Type': 'multipart/form-data', }, })`

Comentários muito úteis

Este bug ainda acontece com os axios mais recentes, por que foi fechado?

Todos 46 comentários

@corujoraphael Por curiosidade, esse pedido estava funcionando antes?

@corujoraphael Não tenho certeza se seu código funciona como está. A configuração onde você especifica seus cabeçalhos deve ser um objeto, mas está faltando uma chave:

(newData) => {
  const data = new FormData();
  data.append('name', 'raphael');
  data.append('file', {
    uri: newData.image.path,
    type: 'image/jpeg',
    name: 'teste'
  });

  return axios.post(
    `${constants.development.URL_API}/file`,
    data, 
    { 
      headers: {
        'Content-Type': 'multipart/form-data',
      }
    },
  )
}

Uma vez que este problema não recebeu uma resposta e isso não parece ser um bug do Axios com base nas informações que temos, estou encerrando este problema.

Se precisar de mais ajuda para depurar seu código, poste no Stack Overflow , Gitter ou comente novamente sobre este problema.

Obrigado!

@emilyemorehouse , encontrei o mesmo problema usando React Native FormData

let s = JSON.stringify({ uri: localUri, name: filename, type: type });
let formData = new FormData();
formData.append('ph0t0', s);

axios.post("http://10.0.1.2:8888/uploadphoto", {
        method: "POST",
        headers: {
                'Content-Type': 'multipart/form-data; charset=utf-8; boundary="another cool boundary";'
        },
        body: formData,
}).then((resp) => {
        console.log(resp);
}).catch(err => {
        console.log(err);
});

Espere alguns pares chave: valor existentes em MultipartForm, Form ou PostForm

20/02/2018 18: 25: 31,740 [W] [photo.go: 411] req.MultipartForm: nulo
20/02/2018 18: 25: 31.740 [W] [foto.go: 412] req.Formulário: mapa []
20/02/2018 18: 25: 31,740 [W] [foto.go: 413] req.
20/02/2018: 25: 31.740 [W] [photo.go: 410] req: & {POST / uploadphoto / dialog / 57120e8951c643ab42a8c19f / 000000000000000000000001 HTTP / 1.1 1 1 map [Content-Type: [application / json; charset = utf-8] User-Agent: [okhttp / 3.6.0] Aceitar: [application / json, text / plain, / ] Content-Length: [419] Conexão: [Keep-Alive] Accept-Encoding: [gzip] Cookie: [lang = zh-TW; PVsessionID = db9a21d63b2d0ea47b68fa8755bd87e2]] 0xc420e3cb80419 [] falso 10.0.1.2:8888 mapa [] mapa []map [] 10.0.1.3:46904 / uploadphoto / dialog / 57120e8951c643ab42a8c19f / 0000000000000000000000010xc420e3cb40}
20/02/2018 18: 25: 31.740 [E] [photo.go: 425] [UploadPhotos] err: request Content-Type is not multipart / form-data

Informação da versão
axios: 0.16.2
Expo: 25.0.0
reagir: 16.2.0
reagente nativo: 0,52,0

Este bug ainda acontece com os axios mais recentes, por que foi fechado?

Se alguém puder fornecer um exemplo reproduzível, ficarei feliz em abrir este backup.

@ Ernie6711 parece que você tem um erro em seu código - não acho que você deva codificar os dados do arquivo antes de anexá-los aos dados do formulário. Além disso, os argumentos para axios.post são axios.post(url[, data[, config]])

Aqui está um exemplo baseado em seu código:

const file ={ uri: localUri, name: filename, type: type};
const formData = new FormData();
formData.append('file', s);

const config = {
        headers: {
                'Content-Type': 'multipart/form-data; charset=utf-8; boundary="another cool boundary";'
        }
};

axios.post("http://10.0.1.2:8888/uploadphoto", formData, config).then((resp) => {
        console.log(resp);
}).catch(err => {
        console.log(err);
});

@emilyemorehouse , verifique os traços do

POST /myserver HTTP/1.1
Content-Type: multipart/form-data

_parts=USERX%2Cusername&_parts=FILE1%2C%5Bobject%20Object%5D

Tenho um exemplo de cliente e servidor local para uploads de arquivo, embora fora do ambiente React Native, que funciona e está codificado corretamente. O exemplo acima não é realmente reproduzível, pois depende de variáveis ​​e de um servidor ao qual não tenho acesso.

Meu palpite é que, se houver algo incorreto com o upload, é porque os dados anexados ao objeto de dados do formulário não são válidos.

@emilyemorehouse Uploads de arquivos funcionam perfeitamente em um ambiente de navegador, eles só falham quando reagem nativos. Como você mesmo mencionou - seus testes estavam fora do ambiente nativo reactivo, eu começaria por aí :)

Experimente um simples upload de arquivo no react native e simplesmente verifique os traços do wirehark, você nem precisa de um servidor funcionando ...

Peguei o mesmo, Axios não reage nativa

@duongtranpyco Removi axios do meu projeto, em vez disso escrevi minha própria aula simples, divirta-se!

PS Se você enviar principalmente JSON, modifique o código. No meu caso, o servidor geralmente espera um formulário.

const request = async ({url, method = 'GET', params, body, responseType = 'json', headers = {}})=>{
    const escape = (data, encode = encodeURIComponent)=>Object.keys(data||{}).reduce((pairs, key)=>{
        for (let value of [].concat(data[key]))
            pairs.push([`${key}`, `${value}`]);
        return pairs;
    }, []).map(pair=>pair.map(encode).join('=')).join('&');

    if (Object.keys(params||{}).length)
        url += '?'+escape(params);
    if (method=='POST' && typeof body=='object')
    {
        if (body instanceof FormData)
            headers['Content-Type'] = 'multipart/form-data';
        else
        {
            body = escape(body);
            headers['Content-Type'] = 'application/x-www-form-urlencoded';
        }
    }
    let {statusCode, request: req} = await new Promise((resolve, reject)=>{
        let xhr = new XMLHttpRequest();
        xhr.open(method, url, true);
        xhr.withCredentials = true;
        xhr.responseType = {json: 'text'}[responseType]||responseType;
        xhr.onload = ()=>resolve({statusCode: xhr.status, request: xhr});
        xhr.onerror = ()=>reject(new TypeError('Network request failed'));
        xhr.ontimeout = ()=>reject(new TypeError('Network request timed out'));
        for (let key in headers)
            xhr.setRequestHeader(key, headers[key]);
        xhr.send(body||null);
    });
    if (statusCode<200 || statusCode>=400)
        throw new Error(`network request failed with ${statusCode}: ${url}`);
    switch(responseType)
    {
        case 'json':
            return JSON.parse(req.responseText);
        case 'text':
            return req.responseText;
        case 'request':
            return req;
    }
    return req.response;
};

request.get = (url, opt = {})=>request({...opt, url, body: null});
request.post = (url, ...args)=>request({...args[1]||{}, url, method: 'POST', body: args[0]});

Olá, estou enfrentando o mesmo problema. Alguém encontrou uma solução?

Segundo @giladno. Já que estou avançando em outras partes, uso uma solução alternativa: escrever uma função específica com fetch () ao enviar imagens.

Já tentei antes, mas nenhuma string dos dados ou argumentos afetou o resultado. O servidor recebeu a chamada, mas nenhum dado foi enviado.

@ Ernie6711 aparentemente os cabeçalhos estão corrompidos e é por isso que o servidor não consegue aceitar os dados do formulário. Implementei a solução alternativa com fetch () e funcionou sem problemas.

Eu tive alguns problemas em reagir nativo.
O problema não são os cabeçalhos.
Na web podemos ter por exemplo:

let formData = new FormData()
formData.append('key', true // bool value)

mas em reagir nativo, o valor da chave deve ser string.

formData.append('key', 'true')

Eu tenho o mesmo problema no react native quando posto em um url, como react native e você poderia verificar o erro que as pessoas reportam @emilyemorehouse. Relatei um erro há 14 dias https://github.com/axios/axios/issues/1618 , mas ninguém respondeu, descreva no readme de sua biblioteca que você não tem suporte para axios em react native, para que muitos desenvolvedores não perdem tempo ..!

Pessoal, agradeço a direção, mas "apenas testar o upload de um arquivo no React Native" não é tão fácil. Não costumo trabalhar no React Native e levaria um bom tempo para rodar um projeto com uploads de arquivos para testar.

Eu tenho um POST simples com dados de formulário que funciona no React Native:

    const formData = new FormData();
    formData.append("data", true);

    const config = {
      headers: {
        "Content-Type": "multipart/form-data; charset=utf-8;"
      }
    };

    axios.post(URL, formData, config).then(
      response => {
        console.log({ response });
      },
      error => {
        console.log({ error });
      }
    );

true é codificado quando enviado ao servidor, o que é interessante.

Dito isso, se alguém puder fornecer um exemplo que eu possa facilmente transformar, ficarei feliz em analisá-lo melhor.

@corujoraphael como você resolveu isso?

Eu adicionei um tipo dentro do objeto de imagem como "Image.type='image/png" pouco antes de anexar e também alterei o tipo de conteúdo para "Content-Type":"multipart/form-data" :

        image.type='image/png'
        formData.append("resource", image);
        return axios
          .post('yourBAckendUrl', formData, {
            headers: {
              Authorization: "yourTokenHere",
              "Content-Type": "multipart/form-data"
            }
          })

Espero que isso ajude alguém.

Eu não consegui fazer isso funcionar bem, estou tentando PUT multipart / form-data para S3 (vídeo). Usar a opção de tipo não ajudou. O cabeçalho multipart / form-data não parece estar na solicitação PUT:

      const data = new FormData();
      data.append('video', {
          uri: 'file:///<path_to_video_on_iphone.mov',
          type: 'video/quicktime',
          name: 'video.mov',
      });
      response = yield call(() => {
        return api.put(url, data, {
          headers: {
              'Content-Type': 'multipart/form-data',
          },
          transformRequest: [
            (data, headers) => {
                delete headers.common.Authorization;
                return data;
            }
          ]
        });
      });

Para este caso, use fetch: D

var data = new FormData();  
data.append('my_photo', {  
  uri: filePath, // your file path string
  name: 'my_photo.jpg',
  type: 'image/jpg'
}

fetch(path, {  
  headers: {
    'Accept': 'application/json',
    'Content-Type': 'multipart/form-data'
  },
  method: 'POST',
  body: data
});

na versão axios 0.18.0 tendo o mesmo problema.
axios remove internamente o cabeçalho Content-Type se não houver corpo em post, put etc por alguma razão ao criar FormData o corpo permanece vazio.
este é o meu código:

const sendFormData = images => {
   // images is an array of base64 images (strings)
    const formData = new FormData();
    images.forEach((img, i) => {
        formData.append('file', img);
        formData.append('name', `${type}-${i + 1}`);
    });

    config.headers = {
        .'Content-Type': 'multipart/form-data'
     };

     return axios.post(`http://someurl.com/api/upload-images`, formData, config)
            .then(response => {
               // handle success
            })
            .catch(err => {
                // handle err
     });
}

Versão nativa de reação 0.55.3
este código de exemplo não está funcionando. o corpo da solicitação está vazio e o cabeçalho Content-Type foi removido

eu tenho os mesmos problemas e meu corpo quando eu check-in debug é string

screen shot 2018-10-26 at 11 12 10 am

e aqui meu código

        const formData = new FormData();
        formData.append('photo', {
          uri: response.uri.replace('file://', ''),
          mineType: 'image/jpeg',
          fileType: 'image/jpg',
          type: 'image/jpg',
          name: 'test.jpg'
        });

        console.log('form data', formData);

         Axios({
           method: 'post',
           url: 'https://dev-host.luxstay.net/api/rooms/10740/photos',
           data: formData,
           headers: {
             Authorization: token,
             'Content-Type': 'multipart/form-data'
           }
         });

Atualizar: ocorreu um erro porque o aplicativo estava no modo de depuração. Quando eu desliguei o modo de depuração, funcionou

axios tem um código em seu adaptador xhr
if (utils.isFormData(requestData)) { delete requestHeaders['Content-Type']; // Let the browser set it }
Eu acho que em react-native ele exclui o cabeçalho de tipo de conteúdo se você estiver enviando dados de formulário com várias partes, mesmo se você configurá-lo no código.
Mas não tenho certeza se comentar a linha resolveria seu problema no react-native.

na versão axios 0.18.0 tendo o mesmo problema.
axios remove internamente o cabeçalho Content-Type se não houver corpo em post, put etc por alguma razão ao criar FormData o corpo permanece vazio.
este é o meu código:

const sendFormData = images => {
   // images is an array of base64 images (strings)
    const formData = new FormData();
    images.forEach((img, i) => {
        formData.append('file', img);
        formData.append('name', `${type}-${i + 1}`);
    });

    config.headers = {
        .'Content-Type': 'multipart/form-data'
     };

     return axios.post(`http://someurl.com/api/upload-images`, formData, config)
            .then(response => {
               // handle success
            })
            .catch(err => {
                // handle err
     });
}

Versão nativa de reação 0.55.3
este código de exemplo não está funcionando. o corpo da solicitação está vazio e o cabeçalho Content-Type foi removido

screen shot 2018-10-26 at 11 12 10 am

Então, como deve ser? Eu também tenho objeto objeto.

@tkserver é a mesma

const a = {
  name: 'dasdasd'
}
console.log(a.toString());

@tkserver é a mesma

const a = {
  name: 'dasdasd'
}
console.log(a.toString());

Talvez eu não tenha sido claro. O Request Payload deve mostrar [object Object] ao visualizar os cabeçalhos?

@tkserver se o seu depurador tiver a inspeção de rede habilitada, ele substituirá o FormData do react-native e resultará na passagem de um objeto FormData vazio que se parecerá com [Object object] na inspeção de rede.
Tente fazer a solicitação desligando a inspeção de rede, espero que isso ajude.

Obrigado Aman725, minhphung210 e todos. Quando eu uso o código em um dispositivo real, o upload funciona corretamente. Parece que isso está relacionado ao simulador iOS.

Tive este problema, mas já está resolvido.

O motivo era que eu estava depurando solicitações de rede. Eu tinha esta linha de código no ponto de entrada do meu aplicativo:

GLOBAL.XMLHttpRequest = GLOBAL.originalXMLHttpRequest || GLOBAL.XMLHttpRequest;

Eu comentei e funciona agora.

// IMPORTANT: this will cause FormData requests to fail.
// GLOBAL.XMLHttpRequest = GLOBAL.originalXMLHttpRequest || GLOBAL.XMLHttpRequest;

Acabei de encontrar isso: https://stackoverflow.com/a/47630754/387912 , isso ajuda?

XMLHttpRequest

Você pode me dizer como você construiu a solicitação para que seja carregado corretamente como multipartidário? Continuo recebendo um erro de rede:

Error: Network Error
    at createError (blob:http://localhost:8081/0754d453-361d-48d1-aaa5-9ff1ad808293:168963:17)
    at XMLHttpRequest.handleError (blob:http://localhost:8081/0754d453-361d-48d1-aaa5-9ff1ad808293:168871:16)
    at XMLHttpRequest.dispatchEvent (blob:http://localhost:8081/0754d453-361d-48d1-aaa5-9ff1ad808293:28708:27)
    at XMLHttpRequest.setReadyState (blob:http://localhost:8081/0754d453-361d-48d1-aaa5-9ff1ad808293:28461:20)
    at XMLHttpRequest.__didCompleteResponse (blob:http://localhost:8081/0754d453-361d-48d1-aaa5-9ff1ad808293:28288:16)
    at blob:http://localhost:8081/0754d453-361d-48d1-aaa5-9ff1ad808293:28398:47
    at RCTDeviceEventEmitter.emit (blob:http://localhost:8081/0754d453-361d-48d1-aaa5-9ff1ad808293:3291:37)
    at MessageQueue.__callFunction (blob:http://localhost:8081/0754d453-361d-48d1-aaa5-9ff1ad808293:2588:44)
    at blob:http://localhost:8081/0754d453-361d-48d1-aaa5-9ff1ad808293:2345:17
    at MessageQueue.__guard (blob:http://localhost:8081/0754d453-361d-48d1-aaa5-9ff1ad808293:2542:13)

ATUALIZAÇÃO: consiga fazer funcionar agora. Atualmente usando:

formData.append('picture', {
          uri: data.uri,
          name: fname,
          type: 'image/' + ext

        });

Se as pessoas ainda estiverem enfrentando esse problema e você tiver
GLOBAL.XMLHttpRequest = GLOBAL.originalXMLHttpRequest || GLOBAL.XMLHttpRequest;
snippet para depurar solicitações de rede, tente adicionar
GLOBAL.FormData = GLOBAL.originalFormData || GLOBAL.FormData
funcionou para mim.

Eu adicionei um tipo dentro do objeto de imagem como "Image.type='image/png" pouco antes de anexar e também alterei o tipo de conteúdo para "Content-Type":"multipart/form-data" :

        image.type='image/png'
        formData.append("resource", image);
        return axios
          .post('yourBAckendUrl', formData, {
            headers: {
              Authorization: "yourTokenHere",
              "Content-Type": "multipart/form-data"
            }
          })

Espero que isso ajude alguém.

Obrigado pela ajuda! Consegui enviar minha foto com o iOS Simunator, mas não com o Android.

Depois de definir o tipo de imagem para 'image / jpeg', parei de ter o erro de rede.

const formData = new FormData();
formData.append('file', {
  uri: pictureUri,
  type: 'image/jpeg',
  name: 'profile-picture'
})

Eu adicionei um tipo dentro do objeto de imagem como "Image.type='image/png" pouco antes de anexar e também alterei o tipo de conteúdo para "Content-Type":"multipart/form-data" :

        image.type='image/png'
        formData.append("resource", image);
        return axios
          .post('yourBAckendUrl', formData, {
            headers: {
              Authorization: "yourTokenHere",
              "Content-Type": "multipart/form-data"
            }
          })

Espero que isso ajude alguém.

Obrigado pela ajuda! Consegui enviar minha foto com o iOS Simunator, mas não com o Android.

Depois de definir o tipo de imagem para 'image / jpeg', parei de ter o erro de rede.

const formData = new FormData();
formData.append('file', {
  uri: pictureUri,
  type: 'image/jpeg',
  name: 'profile-picture'
})

Para quem isso pode ajudar, se você não sabe o tipo de conteúdo que será enviado, use o multipart/form-data . Parece óbvio ler isso agora, mas demorei uma boa hora para fazer qualquer mídia funcionar.

    data.append("image", {
      name: "some_name", // also, won't work without this. A name is required
      height: image.height,
      width: image.width,
      type: "multipart/form-data", // <-- this part here
      uri:
        Platform.OS === "android" ? image.uri : image.uri.replace("file:/", "")
    });

Olá, estou tentando fazer o upload do Axios em Vue.Js. Alguém pode revisar e explicar o problema?

Em Html
<input type="file" id="file" ref="file" multiple @change="assignFiles"/>

Em Js

`assignFiles (e) {

      let uploadedFiles = this.$refs.file.files;
      for( var i = 0; i < uploadedFiles.length; i++ ) { 
        this.form.AttachmentDocs.push(uploadedFiles[i]);           
      }
      console.log(this.form.AttachmentDocs);
 },`

Portanto, enquanto aciono o post, estou anexando os dados do formulário.

`procedSave (e) {

      e.preventDefault();
      this.$v.$touch();
      if(this.$v.$invalid) {
        return;
      }
    this.showLoading(this.loaderId,true);
      this.postDatas.append('form',JSON.stringify(this.form));
      for( var i = 0; i < this.form.AttachmentDocs.length; i++ ){ 
        let attachment = this.form.AttachmentDocs[i];
        this.postDatas.append('files['+i+']',attachment,attachment.name);           
      }

} `

Na postagem, verifiquei o cabeçalho da janela do console,

arquivos [0]: (binário)
arquivos [1]: (binário)
arquivos [2]: (binário)
arquivos [3]: (binário)

Em My server side i cnt para obter os arquivos.

Pode ter algo a ver com

this.postDatas.append('files['+i+']',attachment,attachment.name);  

Experimente files['+' + i + '+']

Tenho o mesmo problema com a API de busca. req.body estava vazio no nó js. Usar 'express-formidable' resolveu o problema. https://www.npmjs.com/package/express-formidable

Pode ter algo a ver com

this.postDatas.append('files['+i+']',attachment,attachment.name);  

Experimente files['+' + i + '+']

Sry + indica a concatinação, wat é o uso da string '+'. O resultado serão arquivos [+0+]

Tenho o mesmo problema com a API de busca. req.body estava vazio no nó js. Usar 'express-formidable' resolveu o problema. https://www.npmjs.com/package/express-formidable

Você incluiu app.use(express.json({ extended: false })); ?

Pode ter algo a ver com

this.postDatas.append('files['+i+']',attachment,attachment.name);  

Experimente files['+' + i + '+']

Sry + indica a concatinação, wat é o uso da string '+'. O resultado serão arquivos [+0+]

Seu código atual sempre resultará em files[+i+] em seu loop for. Nunca será files[+0+], files[+1+], files[+2+], etc .

Além disso, files[+0+] nunca existirá. Não tenho certeza do que você está tentando fazer. Você precisa de files[0], files[1], files[2]... ? Se você está tentando construir um objeto, pode ter files['+0+'] , mas, novamente, não tenho certeza do que você está tentando realizar.

Tenho o mesmo problema com a API de busca. req.body estava vazio no nó js. Usar 'express-formidable' resolveu o problema. https://www.npmjs.com/package/express-formidable

Você incluiu app.use(express.json({ extended: false })); ?
Não. No entanto, em formidável, tenho um problema. A imagem carregada irá requerer campos. Nada nos arquivos de solicitação. Não sei porquê isso está acontecendo.

@duongtranpyco Removi axios do meu projeto, em vez disso escrevi minha própria aula simples, divirta-se!

PS Se você enviar principalmente JSON, modifique o código. No meu caso, o servidor geralmente espera um formulário.

const request = async ({url, method = 'GET', params, body, responseType = 'json', headers = {}})=>{
    const escape = (data, encode = encodeURIComponent)=>Object.keys(data||{}).reduce((pairs, key)=>{
        for (let value of [].concat(data[key]))
            pairs.push([`${key}`, `${value}`]);
        return pairs;
    }, []).map(pair=>pair.map(encode).join('=')).join('&');

    if (Object.keys(params||{}).length)
        url += '?'+escape(params);
    if (method=='POST' && typeof body=='object')
    {
        if (body instanceof FormData)
            headers['Content-Type'] = 'multipart/form-data';
        else
        {
            body = escape(body);
            headers['Content-Type'] = 'application/x-www-form-urlencoded';
        }
    }
    let {statusCode, request: req} = await new Promise((resolve, reject)=>{
        let xhr = new XMLHttpRequest();
        xhr.open(method, url, true);
        xhr.withCredentials = true;
        xhr.responseType = {json: 'text'}[responseType]||responseType;
        xhr.onload = ()=>resolve({statusCode: xhr.status, request: xhr});
        xhr.onerror = ()=>reject(new TypeError('Network request failed'));
        xhr.ontimeout = ()=>reject(new TypeError('Network request timed out'));
        for (let key in headers)
            xhr.setRequestHeader(key, headers[key]);
        xhr.send(body||null);
    });
    if (statusCode<200 || statusCode>=400)
        throw new Error(`network request failed with ${statusCode}: ${url}`);
    switch(responseType)
    {
        case 'json':
            return JSON.parse(req.responseText);
        case 'text':
            return req.responseText;
        case 'request':
            return req;
    }
    return req.response;
};

request.get = (url, opt = {})=>request({...opt, url, body: null});
request.post = (url, ...args)=>request({...args[1]||{}, url, method: 'POST', body: args[0]});

Estou usando este código em meu projeto. Estou tentando entender este código. Uma pergunta, esta linha é necessária,
para (deixe o valor de [] .concat (dados [chave]))? Pode ser escrito de forma simples,
pairs.push ([ ${key} , ${data[key]} ]);

Se as pessoas ainda estiverem enfrentando esse problema e você tiver
GLOBAL.XMLHttpRequest = GLOBAL.originalXMLHttpRequest || GLOBAL.XMLHttpRequest;
snippet para depurar solicitações de rede, tente adicionar
GLOBAL.FormData = GLOBAL.originalFormData || GLOBAL.FormData
funcionou para mim.

Onde está?

Eu também tive o problema. É causado pelo caminho do arquivo no android.
const path = utils.isAndroid ()?
E funciona bem com a implementação da seguinte

    const formData = new FormData();
    const path = utils.isAndroid() ? `file://${filePath}` : filePath;
    formData.append('Voice', {
      uri: path,
      name: 'test',
      type: 'audio/wav',
    });

    formData.append('Content-Type', 'audio/wav');
     const headers =  {
        'Content-Type': 'multipart/form-data',
      };
    return this._sendRequest(url, 'POST', formData, headers);
 data.append('file', {
    uri: newData.image.path,
    type: 'image/jpeg',
    name: 'teste'

Use um nome como: name:'teste.jpeg' e funcionará. você precisa fornecer o formato ao arquivo, caso contrário, ele não funcionará.
Consertei com o nome: 'exemplo.jpeg'

Depois de vários dias tentando fazer upload de vídeo com axios, simplesmente desisto. RNFetchBlob é a melhor opção para enviar arquivos especialmente do Android. Esta seção é fácil de implementar

rn-fetch-blob

Esta página foi útil?
0 / 5 - 0 avaliações