Axios: Axios tidak mengirim data formulir dalam reaksi asli

Dibuat pada 25 Jan 2018  ·  46Komentar  ·  Sumber: axios/axios

Saya sudah mencoba mengirim data formulir dengan aksioma tetapi saya tidak bisa, di alat dev chrome tidak ada konten yang muncul dalam permintaan. Membuat permintaan yang sama melalui tukang pos sebagai respons API secara normal.
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', }, })`

Komentar yang paling membantu

Bug ini masih terjadi dengan axios terbaru, mengapa ini ditutup?

Semua 46 komentar

@corujoraphael Karena penasaran, apakah permintaan ini berfungsi lebih awal?

@corujoraphael Saya tidak yakin kode Anda berjalan apa adanya. Konfigurasi tempat Anda menentukan header harus berupa objek, tetapi tidak ada kurung kurawal:

(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',
      }
    },
  )
}

Karena masalah ini belum menerima tanggapan dan ini tidak terlihat seperti bug Axios berdasarkan info yang kami miliki, saya menutup masalah ini.

Jika Anda memerlukan bantuan lebih lanjut untuk men- debug kode Anda, silakan posting di Stack Overflow , Gitter , atau beri komentar lagi tentang masalah ini.

Terima kasih!

@emilyemorehouse , saya menemui masalah yang sama menggunakan 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);
});

Harapkan beberapa pasangan kunci:nilai ada di MultipartForm, Form, atau PostForm

2018/02/20 18:25:31.740 [W] [photo.go:411] req.MultipartForm: nil
2018/02/20 18:25:31.740 [W] [photo.go:412] req.Form: peta[]
2018/02/20 18:25:31.740 [W] [photo.go:413] req.
2018/02/20 18:25:31.740 [W] [photo.go:410] req: &{POST /uploadphoto/dialog/57120e8951c643ab42a8c19f/0000000000000000000000001 HTTP/1.1 1 1 map[Content-Type:[application/json;charset =utf-8] User-Agent:[okhttp/3.6.0] Accept:[application/json, text/plain, / ] Content-Length:[419] Connection:[Keep-Alive] Accept-Encoding:[gzip] Kuki:[lang=zh-TW; PVsessionID=db9a21d63b2d0ea47b68fa8755bd87e2]] 0xc420e3cb80419 [] salah 10.0.1.2:8888 peta[] peta[]peta[] 10.0.1.3:46904 /uploadphoto/dialog/57120e8951c643ab42a8c19f/00000000000000000000000010xc420e3cb40}
2018/02/20 18:25:31.740 [E] [photo.go:425] [UploadPhotos] err: request Content-Type bukan multipart/form-data

Informasi versi
sumbu: 0.16.2
pameran: 25.0.0
bereaksi: 16.2.0
reaksi-asli: 0.52.0

Bug ini masih terjadi dengan axios terbaru, mengapa ini ditutup?

Jika seseorang dapat memberikan contoh yang dapat direproduksi, saya senang membuka cadangan ini.

@ Ernie6711 sepertinya Anda memiliki kesalahan dalam kode Anda - saya tidak berpikir Anda harus merangkai data file sebelum menambahkannya ke data formulir Anda. Juga, argumen untuk axios.post adalah axios.post(url[, data[, config]])

Berikut ini contoh berdasarkan kode Anda:

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 silakan periksa jejak wireshark. Data diunggah tetapi TIDAK menggunakan pengkodean formulir-data yang tepat. Contoh di atas dapat mereproduksi masalah. Sekali lagi - permintaan berhasil dikirim tetapi dikodekan dengan buruk.

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

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

Saya memiliki contoh klien dan server lokal untuk unggahan file, meskipun di luar lingkungan React Native, yang berfungsi dan dikodekan dengan benar. Contoh di atas tidak benar-benar dapat direproduksi karena bergantung pada variabel dan server yang tidak dapat saya akses.

Dugaan saya jika ada yang salah dengan unggahan, itu karena data yang ditambahkan ke objek data formulir tidak valid.

@emilyemorehouse Unggahan file berfungsi dengan baik di lingkungan browser, mereka hanya gagal pada reaksi asli. Seperti yang Anda sebutkan sendiri - tes Anda berada di luar lingkungan asli reaksi, saya akan mulai dari sana :)

Coba unggah file sederhana dalam reaksi asli dan cukup periksa jejak wireshark, Anda bahkan tidak memerlukan server yang berfungsi ...

Saya mendapatkan hal yang sama, Axios tidak bereaksi asli

@duongtranpyco Saya telah menghapus aksio dari proyek saya, saya malah menulis kelas sederhana saya sendiri, selamat menikmati!

PS Jika Anda terutama mengirim JSON, ubah kodenya. Dalam kasus saya, server biasanya mengharapkan formulir.

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]});

Hai, saya menghadapi masalah yang sama. Apakah ada yang menemukan solusi?

Kedua @giladno. Karena saya akan melanjutkan ke bagian lain, saya menggunakan solusi sebagai gantinya: tulis fungsi tertentu dengan fetch() saat mengunggah gambar.

Sudah dicoba sebelumnya dan tidak ada string atau argumen yang memengaruhi hasilnya. Server menerima panggilan tetapi tidak ada data yang dikirim.

@ Ernie6711 rupanya header rusak dan itulah sebabnya server tidak dapat menerima data formulir. Saya menerapkan solusi dengan fetch() dan berhasil tanpa masalah.

Saya memang memiliki beberapa masalah dalam reaksi-asli.
Masalahnya bukan Header.
Di web kita dapat memiliki misalnya:

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

tetapi dalam reaksi asli, nilai untuk kunci harus berupa string.

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

Saya memiliki masalah yang sama pada reaksi asli ketika saya memposting ke url, seperti yang disebutkan @giladno , Anda harus menguji dalam reaksi asli dan Anda dapat memverifikasi kesalahan yang dilaporkan orang @emilyemorehouse. Saya melaporkan kesalahan 14 hari yang lalu https://github.com/axios/axios/issues/1618 , tetapi tidak ada yang menanggapi, harap jelaskan di readme perpustakaan Anda bahwa Anda tidak memiliki dukungan untuk axios pada reaksi asli, sehingga banyak pengembang tidak membuang waktu..!

Kalian semua, saya menghargai arahannya tetapi "hanya menguji unggahan file di React Native" tidak semudah itu. Saya tidak sering bekerja di React Native dan akan membutuhkan waktu yang cukup lama untuk menjalankan proyek dengan unggahan file untuk diuji.

Saya memiliki POST sederhana dengan data formulir yang berfungsi di 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 mendapat string ketika dikirim ke server, yang menarik.

Yang mengatakan, jika ada yang dapat memberikan contoh bahwa saya dapat dengan mudah berputar, saya senang untuk melihat lebih dalam.

@corujoraphael bagaimana Anda menyelesaikan ini?

Saya menambahkan tipe di dalam objek gambar seperti "Image.type='image/png" tepat sebelum menambahkan dan juga mengubah tipe konten menjadi "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"
            }
          })

Semoga ini bisa membantu seseorang.

Saya tidak dapat menjalankan ini juga, saya mencoba PUT multipart/form-data ke S3 (video). Menggunakan opsi tipe tidak membantu. Header multipart/form-data tampaknya tidak ada dalam permintaan 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;
            }
          ]
        });
      });

Untuk kasus ini gunakan 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
});

di axios versi 0.18.0 mengalami masalah yang sama.
axios menghapus secara internal header Content-Type jika tidak ada badan di post, put dll karena beberapa alasan saat membuat FormData badan tetap kosong..
ini kode saya:

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
     });
}

Bereaksi versi Asli 0.55.3
kode contoh ini tidak berfungsi. badan permintaan kosong dan header Content-Type dihapus

saya memiliki masalah yang sama dan tubuh saya ketika saya check in debug adalah string

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

dan di sini kode saya

        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'
           }
         });

Pembaruan : Terjadi kesalahan karena aplikasi dalam mode debug. Ketika saya mematikan mode debug, itu berhasil

axios memiliki kode di adaptor xhr-nya
if (utils.isFormData(requestData)) { delete requestHeaders['Content-Type']; // Let the browser set it }
saya kira dalam reaksi-asli itu menghapus header tipe konten jika Anda mengirim data formulir multi-bagian bahkan jika Anda mengaturnya dalam kode.
Tetapi saya tidak yakin apakah mengomentari baris akan menyelesaikan masalah Anda dalam reaksi-asli.

di axios versi 0.18.0 mengalami masalah yang sama.
axios menghapus secara internal header Content-Type jika tidak ada badan di post, put dll karena beberapa alasan saat membuat FormData badan tetap kosong..
ini kode saya:

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
     });
}

Bereaksi versi Asli 0.55.3
kode contoh ini tidak berfungsi. badan permintaan kosong dan header Content-Type dihapus

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

Jadi seperti apa seharusnya? Saya memiliki objek objek juga.

@tkserver sepertinya ketika Anda memiliki objek dan kemudian Anda toString() itu.

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

@tkserver sepertinya ketika Anda memiliki objek dan kemudian Anda toString() itu.

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

Mungkin saya tidak jelas. Haruskah Permintaan Payload menunjukkan [objek Obyek] saat melihat header?

@tkserver jika debugger Anda mengaktifkan inspeksi jaringan, itu akan menimpa FormData asli reaksi dan akan menghasilkan objek FormData kosong yang akan terlihat seperti [Objek objek] di inspeksi jaringan.
Coba buat permintaan dengan mematikan pemeriksaan jaringan, semoga ini membantu.

Terima kasih Aman725, minhphung210 dan semuanya. Ketika saya menggunakan kode pada perangkat nyata, unggahan berfungsi dengan baik. Tampaknya ini terkait dengan simulator iOS.

Saya memiliki masalah ini, tetapi sudah diperbaiki sekarang.

Alasannya adalah karena saya sedang men-debug permintaan jaringan. Saya memiliki baris kode ini di titik masuk aplikasi saya:

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

Saya berkomentar dan berfungsi sekarang.

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

Saya baru saja menemukan ini: https://stackoverflow.com/a/47630754/387912 , apakah ini membantu?

XMLHttpRequest

Bisakah Anda memberi tahu saya bagaimana Anda membuat permintaan sehingga diunggah dengan benar sebagai multipartai? Saya terus mendapatkan kesalahan jaringan:

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)

UPDATE: berhasil membuatnya berfungsi sekarang. Saat ini menggunakan:

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

        });

Jika orang masih mengalami masalah ini, dan Anda memiliki
GLOBAL.XMLHttpRequest = GLOBAL.originalXMLHttpRequest || GLOBAL.XMLHttpRequest;
cuplikan untuk men-debug permintaan jaringan, coba tambahkan
GLOBAL.FormData = GLOBAL.originalFormData || GLOBAL.FormData
itu berhasil untuk saya.

Saya menambahkan tipe di dalam objek gambar seperti "Image.type='image/png" tepat sebelum menambahkan dan juga mengubah tipe konten menjadi "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"
            }
          })

Semoga ini bisa membantu seseorang.

Terima kasih atas bantuan Anda! Saya dapat mengunggah gambar saya dengan iOS Simunator tetapi tidak dengan Android.

Setelah saya mengatur jenis gambar ke 'image/jpeg' saya berhenti mengalami Kesalahan Jaringan.

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

Saya menambahkan tipe di dalam objek gambar seperti "Image.type='image/png" tepat sebelum menambahkan dan juga mengubah tipe konten menjadi "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"
            }
          })

Semoga ini bisa membantu seseorang.

Terima kasih atas bantuan Anda! Saya dapat mengunggah gambar saya dengan iOS Simunator tetapi tidak dengan Android.

Setelah saya mengatur jenis gambar ke 'image/jpeg' saya berhenti mengalami Kesalahan Jaringan.

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

Bagi siapa saja yang mungkin bisa membantu, jika Anda tidak tahu jenis konten yang akan dikirim, gunakan multipart/form-data . Kedengarannya jelas membaca ini sekarang, tetapi saya butuh waktu berjam-jam untuk membuat media apa pun berfungsi.

    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:/", "")
    });

Hai, saya mencoba mengunggah file Axios di Vue.Js. Adakah yang bisa meninjau dan menjelaskan masalah ini?

Dalam HTML
<input type="file" id="file" ref="file" multiple @change="assignFiles"/>

Di Js

` menetapkan File(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);
 },`

Jadi, saat memicu posting, saya menambahkan data formulir.

`lanjutkanSimpan(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);           
      }

}`

Jadi Di pos, saya memeriksa header jendela konsol, di sana ditampilkan

file[0]: (biner)
file[1]: (biner)
file [2]: (biner)
file[3]: (biner)

Di sisi server saya, saya tidak bisa mendapatkan file.

Mungkin ada hubungannya dengan

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

Coba files['+' + i + '+']

Saya memiliki masalah yang sama dengan fetch api. req.body kosong di node js. Menggunakan 'express-tangguh' memecahkan masalah. https://www.npmjs.com/package/express-formidable

Mungkin ada hubungannya dengan

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

Coba files['+' + i + '+']

Sry + menunjukkan penggabungan, wat adalah penggunaan string '+' . Hasilnya akan menjadi file[+0+]

Saya memiliki masalah yang sama dengan fetch api. req.body kosong di node js. Menggunakan 'express-tangguh' memecahkan masalah. https://www.npmjs.com/package/express-formidable

Apakah Anda menyertakan app.use(express.json({ extended: false })); ?

Mungkin ada hubungannya dengan

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

Coba files['+' + i + '+']

Sry + menunjukkan penggabungan, wat adalah penggunaan string '+' . Hasilnya akan menjadi file[+0+]

Kode Anda saat ini akan selalu menghasilkan files[+i+] di for loop Anda. Tidak akan pernah files[+0+], files[+1+], files[+2+], etc .

Juga, files[+0+] tidak akan pernah ada. Tidak yakin apa yang Anda coba lakukan. Anda butuh files[0], files[1], files[2]... ? Jika Anda mencoba membuat objek, maka Anda dapat memiliki files['+0+'] , tetapi, sekali lagi, saya tidak yakin apa yang ingin Anda capai.

Saya memiliki masalah yang sama dengan fetch api. req.body kosong di node js. Menggunakan 'express-tangguh' memecahkan masalah. https://www.npmjs.com/package/express-formidable

Apakah Anda menyertakan app.use(express.json({ extended: false })); ?
Tidak. Namun, di tangguh saya punya satu masalah. Gambar yang diunggah akan masuk ke bidang yang diminta. Tidak ada dalam file permintaan. Tidak yakin mengapa ini terjadi.

@duongtranpyco Saya telah menghapus aksio dari proyek saya, saya malah menulis kelas sederhana saya sendiri, selamat menikmati!

PS Jika Anda terutama mengirim JSON, ubah kodenya. Dalam kasus saya, server biasanya mengharapkan formulir.

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]});

Saya menggunakan kode ini dalam proyek saya. Saya mencoba memahami kode ini. Satu pertanyaan, apakah baris ini perlu,
for (biarkan nilai [].concat(data[key]))? Dapat ditulis secara sederhana,
pair.push([ ${key} , ${data[key]} ]);

Jika orang masih mengalami masalah ini, dan Anda memiliki
GLOBAL.XMLHttpRequest = GLOBAL.originalXMLHttpRequest || GLOBAL.XMLHttpRequest;
cuplikan untuk men-debug permintaan jaringan, coba tambahkan
GLOBAL.FormData = GLOBAL.originalFormData || GLOBAL.FormData
itu berhasil untuk saya.

Dimana?

Saya juga punya masalah. Hal ini disebabkan oleh path file di android.
jalur const = utils.isAndroid() ?
Dan itu berfungsi dengan baik dengan menerapkan sebagai berikut

    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'

Gunakan nama seperti : name:'teste.jpeg' dan itu akan berhasil. anda perlu memberikan format ke file jika tidak maka tidak akan berfungsi.
Saya memperbaikinya dengan memiliki name:'example.jpeg'

Setelah beberapa hari mencoba mengunggah video dengan axios, saya menyerah begitu saja. RNFetchBlob adalah opsi yang lebih baik untuk mengunggah file dari terutama Android. Bagian ini mudah diterapkan

rn-fetch-blob

Apakah halaman ini membantu?
0 / 5 - 0 peringkat