Axios: Tidak bisa mendapatkan .posting dengan 'Content-Type': 'multipart/form-data' berfungsi

Kode terlihat bagus untuk saya. (Anda tidak perlu menyetel Content-Type, tetapi itu tidak penting.) Apa yang terjadi ketika Anda mencoba mengirim permintaan melalui axios?

Saya perhatikan bahwa pengaturan Content-Type atau tidak tidak mengubah apa pun dalam kasus ini. Ketika saya mencoba mengirim permintaan dengan Axios, sepertinya data berjalan sebagai string kosong sehingga backend akan merespons dengan kesalahan terkait dengan parameter yang hilang.

Saya menggunakan 0.9.1 tetapi masalah tetap ada pada 0.11.0.

Tolong beri tahu saya jika ada hal lain yang bisa saya lakukan untuk membantu men-debug ini, oke?
Terima kasih @nickuraltsev !

Bisakah Anda melihat tampilan permintaan Anda di panel Jaringan Alat Dev Chrome dan memberikan tangkapan layar jika memungkinkan?

@nickuraltsev lihat apakah ini membantu:

Saya pikir Header Permintaan salah.

Jadi tidak ada Request Payload?

Yah, kita harus memilikinya tetapi data berjalan sebagai string kosong. Saya tidak tahu apa yang mungkin merusaknya (mengingat kode yang saya bagikan di posting pertama saya).

Jadi begitu. Dan tidak ada bagian Permintaan Payload untuk permintaan Anda di Dev Tools, benar?

Mungkin masalah tajuk terkait. Ketika tipe konten diatur dalam objek konfigurasi dalam permintaan, itu digabungkan misalnya:
axios.post(
'https://example.com/login',
{emailAddress: email, kata sandi: hashedPassword},
{headers: {'content-type': 'application/json'}}
);

tipe konten header masuk sebagai application/json,application/json
tubuh tidak akan diuraikan dalam kasus ini

@nickuraltsev benar! Apa yang Anda lihat di tangkapan layar itu adalah semua yang saya miliki di alat dev.
@rrapant mungkin benar, tapi saya hampir yakin bahwa pengaturan 'Content-Type' atau tidak, setidaknya dalam kasus ini, tidak mengubah apa pun. Saya harus memeriksa lagi untuk memastikan.

@rrapant Masalah dengan nilai tipe konten duplikat telah diperbaiki oleh #317. Perbaikan akan disertakan dalam rilis berikutnya. Terima kasih!

@rafaelbiten Saya baru saja mencoba mereproduksi masalah tetapi tidak berhasil. Saya menggunakan kode berikut:

const data = new FormData();

data.append('action', 'ADD');
data.append('param', 0);
data.append('secondParam', 0);
data.append('file', new Blob(['test payload'], { type: 'text/csv' }));

axios.post('http://httpbin.org/post', data);

Data berhasil dikirim ke server:

@rafaelbiten Bisakah Anda mencoba mengirim permintaan dengan FromData ke http://httpbin.org/post seperti pada cuplikan kode saya?

Menutup ini untuk saat ini. Silakan buka kembali jika perlu.

Hai @nickuraltsev , saya mendapatkan masalah yang sama.

      var fd = new FormData();
      fd.append('file', this.refs.multipartfiles.files[0]);

            const config = { headers: { 'Content-Type': 'multipart/form-data' } };
            axios.post('/dataAPI/sendFile', {
                "UploadCommand": fd
              }, config)
              .then(function (response) {
                console.log(response);
              })
              .catch(function (error) {
                console.log(error);
              });

Silakan temukan tangkapan layar informasi tajuk saya di bawah ini,

Saya punya pertanyaan, _apakah axios mendukung pengiriman file data multi-bagian ke server node?_

@Sreekhar Saya tidak tahu apakah itu akan berhasil, tetapi bisakah Anda menambahkan FormData sebagai argumen kedua alih-alih membungkusnya dengan objek lain?
axios.post('/dataAPI/sendFile', fd, config)

Jika Anda perlu menggunakan 'UploadCommand' sebagai nama bagian di mana file tersebut berada, Anda perlu menggunakan ini
fd.append('UploadCommand', this.refs.multipartfiles.files[0]);

@yungpanda saya menemukan alternatif untuk melakukan itu. Saya kira saya harus membuat ulang API sekarang. Bagaimanapun saya akan mencoba dan memeriksa apakah itu berhasil, saya akan terus memperbarui utasnya. Terima kasih untuk balasan Anda.

@Sreekhar Setel Content-Type ke undefined untuk membiarkan browser mengubahnya menjadi multipart/form-data dan menambahkan batas secara otomatis

@nickuraltsev ini adalah contoh minimal yang tidak berfungsi pada node:

const data = new FormData();

data.append('action', 'ADD');
data.append('param', 0);
data.append('secondParam', 0);

axios.post('http://httpbin.org/post', data).then(req => {
  console.log('Req done: ', req)
}).catch(err => {
  console.error('Error: ', err)
})

Kesalahan: tulis setelah akhir

@krzkaczor Sudahkah Anda menemukan solusi untuk mengirim data multipart/formulir dengan axios ?

@PierreCavalet tidak, saya menggunakan request-promise sebagai gantinya.

@krzkaczor terima kasih, terpaksa beralih juga

@krzkaczor Coba tambahkan tipe konten jika Anda belum melakukannya

const config = { headers: { 'Content-Type': 'multipart/form-data' } };
let fd = new FormData();
fd.append('file',files[0])
return axios.post("http://localhost:5000/upload", fd, config)

@krzkaczor saya juga menghadapi masalah yang sama dengan axios dan multipart/form-data. Bisakah Anda memposting inti dari kode yang Anda gunakan dengan request-promise.

@dan-boa ini dia: https://Gist.github.com/krzkaczor/bdbe09d4096b051a3c18387c4ca79a06 Ini juga menunjukkan peretasan cara mengirim string sebagai file (jalur pengaturan)

Jika ada yang bertanya-tanya, inilah contoh cara menggunakan FormData dengan axios . Anda pada dasarnya harus mengalirkan data ke buffer dan meneruskan header yang benar.

const concat = require("concat-stream")
const fd = new FormData()

fd.append("hello", "world")
fd.append("file", fs.createReadStream(file))
fd.pipe(concat(data => {
  axios.post("/hello", data, {
    headers: fd.getHeaders()
  })
}))

Saya memiliki masalah yang sama (di browser, bukan di node). Ternyata itu berfungsi jika Anda tidak menyetel header Content-Type sama sekali dan membiarkan axios mencari tahu (periksa juga apakah Anda tidak menyetel header itu sebagai default di pencegat axios juga. Jika Anda memerlukan beberapa default untuk sisa panggilan API, Anda dapat membuat instance aksioma terpisah untuk permintaan FormData())

Saya akhirnya menggunakan request-promise di sisi node ketika mencoba mengunggah ke server jarak jauh lain.

Saya beralih ke request-promise untuk alasan yang sama. Cinta axios sebaliknya!

@guncha Contoh Anda bekerja untuk saya di 0.15.3, sampai saya mencoba mengunggah file biner, yang akhirnya dikodekan sebagai UTF8. Memberitahu concat untuk menggunakan buffer memperbaiki masalah.

const concat = require("concat-stream")
const fd = new FormData()

fd.append("hello", "world")
fd.append("file", fs.createReadStream(binaryFile))
fd.pipe(concat({encoding: 'buffer'}, data => {
  axios.post("/hello", data, {
    headers: fd.getHeaders()
  })
}))

Atau, saya akan menggunakan janji:

const promise = new Promise((resolve) => {
  const fd = new FormData();
  fd.append("hello", "world");
  fd.append("file", fs.createReadStream(binaryFile));
  fd.pipe(concat({ encoding: 'buffer' }, data => resolve({ data, headers: fd.getHeaders() })));
});
promise.then(({ data, headers }) => axios.post('/hello', data, { headers }));

const callApi = (url, params) => {
  const formData  = new FormData()
  for(let name in params) {
    let param = params[name]
    if (typeof param === 'object') {
      param = JSON.stringify(params[name])
    }
    formData.append(name, param)
  }

  return axios.post(url, formData)
    .then(response => {
      console.log(response)
    })
}

@guncha bekerja untuk saya. Terima kasih

masalah yang sama di sini

tambahkan saja batas ke Content-Type :

const request = require('axios');
const FormData = require('form-data');
const fs = require('fs');

let data = new FormData();
data.append('file1', fs.createReadStream('./image1.jpeg'), 'image1.jpeg');
data.append('file2', fs.createReadStream('./image2.jpeg'), 'image2.jpeg');

let options = {
    method: 'POST',
    url: 'http://localhost:3200/upload',
    headers: {
        'Content-Type': `multipart/form-data; boundary=${data._boundary}`
    },
    data
};

return request(options)
    .then(response => {
        console.log(response);
    });

Hai,
Saya mendapatkan file ini dalam format json, adakah yang bisa membantu saya bagaimana saya harus mengubahnya menjadi file multi-bagian.
Platform yang digunakan adalah java8.
"body": "------WebKitFormBoundaryQsJGeBuR8e9dQ4Pm\r\nContent-Disposition: form-data; name=\"file\"; filename=\"backup prolog.txt\"\r\nContent-Type: text/plain\r\n\r\n%All the Pre-Defined relations\r\nconnected(hira,rohit,father).\r\nconnected(rohit,rakesh,father).\r\nconnected(ram,hira,father).\r\nconnected(kavri,hira,mother).\r\nconnected(hira,kavri,son).\r\nconnected(arun,vinayak,father).\r\nconnected(vinayak,arun,son).\r\nconnected(arun,shashi,husband).\r\nconnected(shashi,arun,wife).\r\nconnected(vinayak,vardaan,brother).\r\nconnected(vardaan,vinayak,brother).\r\nconnected(shashi,vinayak,mother).\r\nconnected(vinayak,shashi,son).\r\n\r\n\r\n\r\nconnected2(X,Y,D) :- connected(X,Y,D).\r\n%connected2(X,Y,D) :- connected(Y,X,D).\r\n\r\nnext_node(Current, Next,R, Path) :-connected2(Current, Next, R),not(member(Next, Path)).\r\n\r\nfunc(how,is,X,related,to,Y):-depth_first(X,Y,[X],P),write(P).\r\n%Procedure to Start the depth_first\r\ndepth_first(Goal, Goal, _, [Goal]).\r\n\r\ndepth_first(Start, Goal, Visited, [Start,is,R,of|Path]) :-next_node(Start, Next_node,R, Visited),depth_first(Next_node, Goal,[Next_node,R|Visited], Path).\r\n\r\n\r\n\r\n\r\n\r\n\r\n------WebKitFormBoundaryQsJGeBuR8e9dQ4Pm--\r\n"
Terima kasih

Kode berfungsi di browser tetapi tidak di node.js.

const fdata = new FormData();
fdata.append('user', u);
fdata.append('hostnames', n.join(' '));
const host = localStorage.getItem('host');
const port = localStorage.getItem('port');
axios({
  url: `http://${host}:${port}/hosts/remove`,
  method: 'post',
  data: fdata
}).then(response => {
  if (response.status === 200) {
    console.log(response.data);
    console.log('Removed host successfully');
  }
  return null;
}).catch(er => console.log(er));

Hai @Sreekhar
Bagi saya, saya mengubah konfigurasi menjadi
const config = { headers: { 'Content-Type': 'application/json' } };
dan itu bekerja dengan baik

Silakan buka kembali sampai ada jawaban/alur kerja yang konsisten untuk ini. Sepertinya banyak orang masih mengalami masalah dengan ini.

+1 buka kembali

Posting HTTP yang menyertakan data file biner tampaknya berfungsi dengan baik di axios v0.16.2

// The following was tested successfully with axios v0.16.2

// Create a new form.  Note:  could also specify an existing form as
// the parameter to the FormData() constructor to copy all the elements
// from the existing form to the new one being created.

var tempFormData = new FormData();

var someNoteValue = 'Hello World';
var someAudioData = [];  // populate this with data from file, with MediaRecorder() etc.


// Add form fields

tempFormData.set('SomeNote', 'Hello World');
tempFormData.set('SomeRecording', someAudioData[0], 'SampleRecording.webm');


// Optional:  output list of form fields to the console for debugging

for (var pair of tempFormData.entries()) {
    console.log('Form field: ' + pair[0] + ', ' + pair[1]);
}


// Call Axios to post the form to myurl

axios({
    method: 'post',
    url: 'myurl',
    data: tempFormData,
    config: { headers: {'Content-Type': 'multipart/form-data' }}
})
    .then(function (response) {
        //handle success
        console.log(response);
    })
    .catch(function (response) {
        //handle error
        console.log(response);
    });

            }

Juga saat menggunakan buffer untuk mewakili file, ini berfungsi untuk saya:

      const form = new FormData();
      const fileBuffer = new Buffer(
        'MM2 - noticeably shallower than the original - score: 101%', 'utf-8'
      );
      form.append('name', 'reviews.txt'); // additional form data field
      form.append('file', fileBuffer, 'original-file-name.bar');

      const res = await axios.post(`/uploadfile`, form, { headers: form.getHeaders() });

Penting untuk diperhatikan: salah satu solusi di atas TIDAK berfungsi jika Anda memiliki parameter data default yang disetel dalam default instance Axios. Anda juga dapat memeriksa apakah Anda menentukan header Tipe-Konten default di instans Axios Anda (melalui axios.defaults.headers dan axios.defaults.parameters).

Ini mungkin tidak tepat, tetapi masalahnya mungkin terkait dengan penggunaan body-parser di sisi server. Saya berjuang dengan masalah serupa dan menemukan posting ini:

https://philna.sh/blog/2016/06/13/the-surprise-multipart-form-data/

TL;DR - body-parser tidak menangani multipart/form-data. Dengan kata lain, axios bukanlah masalah dan body-parser adalah masalahnya. Ini mungkin mengapa solusi buffer yang disebutkan di atas berfungsi.

Saya menganggap fungsi ini untuk alasan keamanan, seperti yang disebutkan di sini:

http://andrewkelley.me/post/do-not-use-bodyparser-with-express-js.html

Saya harap itu membantu seseorang!

Saya memiliki masalah yang sama. Saya menggunakan Axios 0.16.2 dan mengirim dengan XMLHttpRequest berfungsi, tetapi tidak dengan Axios.

Saya memiliki objek FormData dasar:

const formData = FormData baru();
formData.append('nama', 'namateks');

Saya mencoba saran @ Janekk :

axios({
      method: 'post',
      url,
      withCredentials: true,
      data: { formData },
    })

lalu saran @faalkhah :

const config = { headers: { 'Content-Type': 'application/json' } };
    axios({
      method: 'post',
      url,
      withCredentials: true,
      data: { formData },
      config,
    })

atau saran @askona :

const config = { headers: { 'Content-Type': undefined } };
    axios({
      method: 'post',
      url,
      withCredentials: true,
      data: { formData },
      config,
    })

Header permintaan adalah application/json dan formData kosong.

Saya tidak tahu bagaimana mencoba memperbaiki @demeter-macik, karena sepertinya itu hanya berfungsi di back-end https://stackoverflow.com/a/13454425/968379

Halo semua,
Saya memiliki masalah yang sama
kode saya di klien
`

    const url = '/file/uploadTest';
    const formData = new FormData();
    formData.append('file', file);
    formData.append('params1', value);
    formData.append('params2', value2)

    const config = {
        headers: {
            'Content-Type': 'multipart/form-data',
        }
    }
    axios.post(url,formData,config)`

di server layar, saya mencatat konsol req.body
Saya menemukan, ketika saya memanggil permintaan 10 kali, ada sekitar 3 4 kali server tidak menerima tubuh (tubuh kosong).
saya memeriksa di devtool of chrome, permintaan masih mengirimkan file dan badan di payload.
Saya masih belum menemukan alasannya, tetapi saya punya solusinya

yaitu header permintaan.

`kode

    const url = '/file/uploadTest';
    const formData = new FormData();
    formData.append('file', file);
    formData.append('params1', value);
    formData.append('params2', value2)
    const config = {
        headers: {
            'Content-Type': 'multipart/form-data',
            'params1': value,
            'params2': value2
        }
    }
    axios.post(url,formData,config)`

Hai @Sreekhar ,
Apakah Anda memecahkan masalah? Saya tidak menemukan solusinya dapatkah seseorang membantu saya, Tolong.
Juga, Terima kasih sebelumnya

Halo,

Saya telah mencoba memposting multiformdata (ini adalah api SMS Eztext)
menggunakan axios dengan node.js.

Ini berfungsi dengan baik untuk kode berikut,
kembalikan Janji baru(fungsi(putuskan, tolak) {

        var request = require("request");
        var options = {
            method: 'POST',
            url: 'https://app.eztexting.com/sending/messages',
            qs: {format: 'json'},
            formData:
                {
                    User: '**',
                    Password: '**',
                    'PhoneNumbers[0]': '8572222***',
                    Message: 'Appointment Reminder',
                    MessageTypeID: '1'
                }
        };
        request(options, function (error, response, body) {
            if (error) {
                console.log(error);
                reject(error);
            }
            else {
                console.log(response);
                resolve(response);
            }

            // console.log(body);
        });

Tetapi tidak berfungsi dengan axios karena SMS tidak terkirim tetapi saya mendapatkan kode status sebagai 200 untuk permintaan berikut: -
var axios=memerlukan('aksios');

         axios.post('https://app.eztexting.com/sending/messages', {
             qs: { format: 'json' },
             headers: {
                 'Content-Type': 'application/x-www-form-urlencoded'
             },
             formData:
                 { User: '****',
                     Password: '2sH****5',
                     'PhoneNumbers[0]':'85722******',
                     Message: 'Hello Yahska',
                     MessageTypeID: 1 }
         })
             .then(function (response) {
                 console.log(response);
             })
             .catch(function (error) {
                 console.log(error);
             });

mengapa permintaan posting berhasil dengan perpustakaan 'permintaan' dan tidak dengan Axios?

Sudahkah Anda mencoba mengonversi data dari JSON ke FormData tanpa menyetel header apa pun?
Header untuk data (yaitu selain header otentikasi) harus ditangani secara otomatis

async function sendMessage(myJSONPayload){
  try{
    const data = convertJSON2FormData(myJSONPayload);

    const response = await axios.post('https://app.eztexting.com/sending/messages', {
  data
});
    console.log(response);
  } catch(ex){
    console error(err);
  }
}

sendMessage ({ User: '****',
                     Password: '2sH****5',
                     'PhoneNumbers[0]':'85722******',
                     Message: 'Hello Yahska',
                     MessageTypeID: 1 }
         });

Untuk konversi dari JSON ke FormData gunakan sesuatu seperti di jawaban ini

Ingat bahwa kunci bersarang sulit untuk ditangani. Misalnya, saat mengirim data ke backend kami, ini berfungsi jika kami meratakannya seperti ini:

{a: {b: 2}} --> formData.append("a.b",2)

Masalah yang sama disini.

tentu saja, @michaelscheurer! Menyetel tajuk permintaan tidak cukup: Anda harus mengirimkan FormData untuk membuatnya berfungsi. Ini adalah objek browser yang akan diserialisasikan dengan semua batasan yang tepat untuk bekerja dengan permintaan... atau axios atau vanilla js akan mengonversi data JSON ke FormData untuk Anda. Axios akan mengenali bahwa ini adalah FormData dan juga mengatur header untuk Anda, jadi Anda tidak perlu menyetelnya
Coba ikuti petunjuk jawaban saya sebelumnya ...

@Iamuertepeluda
Saya mencoba mengikuti hal sesuai saran Anda tetapi tidak berhasil,,, perilaku yang sama ketika saya mendapatkan status 200 ok tetapi SMS tidak dikirim dengan permintaan berikut
var axios=memerlukan('aksios');

    const FormData = require('form-data');

    const form = new FormData();

    //fo this jason I created a form
    // formData:
    // {
    //     User: '*****',
    //         Password
    // :
    //     '******',
    //         'PhoneNumbers[0]'
    // :
    //     '8****2763',
    //         Message
    // :
    //     'Appointment Reminder',
    //         MessageTypeID
    // :
    //     '1'
    // }

    form.append('User','****');
    form.append('Password','*****');
    form.append('PhoneNumbers[0]','*****');
    form.append('Message','Appointment Reminder');
    form.append('MessageTypeID','1');


         axios.post('https://app.eztexting.com/sending/messages', form,
    {
        qs: {format: 'json'},
        headers:
        {
                'content-type'
        :
            'multipart/form-data; boundary=----WebKitFormBoundary7MA4YWxkTrZu0gW'
        }
    }
)
             .then(function (response) {
                 console.log(response);
             })
             .catch(function (error) {
                 console.log(error);
             });

@Ruchi2729 apakah Anda menggunakan node.js atau browser?

di browser Anda tidak perlu const FormData = require('form-data'); karena FormData asli.

Selanjutnya coba tanpa mengatur header dan qs, atau coba

axios.request({
 url: "https://app.eztexting.com/sending/messages"
 type: "post",
 data: form //the instance of FormData of your stub
});

seperti yang saya sebutkan, itu harus mengatur header secara otomatis di browser

@ Ruchi2729 saya melihat Anda menggunakan node, maaf.
Saya ingat pernah menggunakan form-data dengan axios sekali tetapi saya tidak ingat apakah itu benar-benar berfungsi.

Tapi apakah Anda yakin ini cara mengirim SMS dengan eztexting yang benar? Dari dokumen mereka tampaknya berbeda, seperti Anda harus menggunakan kunci api dan klien simpul mereka sendiri ...

bisakah ini dibuka kembali? Sepertinya masih banyak orang yang menentang hal ini, termasuk saya sendiri. Misalnya, permintaan ini tidak sampai ke server seperti yang diharapkan melalui axios, tetapi jika saya mengirim file yang sama melalui Postman sebagai multipart/form-data , semuanya berfungsi.

Sunting: Masalah saya mencoba mengirim data-uri yang disandikan base64 sebagai form-data. Jika ada orang lain yang berjuang dengan masalah yang sama, berikut adalah beberapa contoh kode untuk mengonversinya:

async function importCsv(data: CsvImportData): Promise<void> {
    const formData = new FormData();
    const headers = {'Content-Type': 'multipart/form-data'};

    formData.append('csv', dataURItoFile(data.file, `upload_${Date.now()}.csv`));

    try {
      await axios.post('https://example.com/api/upload/csv', formData, {headers});
    } catch(e) {
      console.error(e);
    }
}

function dataURItoFile(dataURI: string, defaultFileName: string): File {
  let byteString: string;
  const [metadata, data] = dataURI.split(',');
  if (/base64$/.test(metadata)) {
    byteString = atob(data);
  } else {
    byteString = unescape(data);
  }

  const mimetype: string = metadata.split(':')[1].split(';')[0];
  const filename: string = (metadata.match(/name\=(.*);/) || [])[1] || defaultFileName;

  let dataView: Uint8Array = new Uint8Array(byteString.length);
  for (let i = 0; i < byteString.length; i++) {
    dataView[i] = byteString.charCodeAt(i);
  }
  return new File([dataView], filename);
}

Hai, saya merujuk dokumen ini:- https://www.eztexting.com/developers/sms-api-documentation/rest#Sending
dokumen mana yang Anda maksud untuk kunci API dan semuanya?

@Ruchi2729
Maaf saya bingung dengan Nexmo, yang merupakan layanan SMS lain dan memiliki klien sendiri untuk node

Tapi bagaimanapun, menurut dokumentasi yang Anda rujuk , Anda dapat menghindari FormData dengan menyetel format ke json dan membiarkan axios mengirim payload JSON (Anda dapat membiarkannya menebak header secara implisit dengan format payload)

https://app.eztexting.com/sending/messages?format=json

Saya berjuang dengan ini lebih lama yang ingin saya akui, jadi semoga ini membantu seseorang. Saya menggunakan axios, express, dan express-fileupload. Saya berhasil mengunggah ke Node dengan params yang telah saya tambahkan ke FormData. Saya mengambil file dengan req.files dan saya mengambil sisa data formulir dengan req.body['yourfilename']

Server (Ekspres):

router.post('/helper/amazon/upload', function(req, res) { if (!req.files) { return res.status(400).send('No files were uploaded.') } console.log(req.body.filename); return console.log(req.files);

Bagian depan (sumbu)

const formData = new FormData(); formData.append('file', this.validFile); formData.append('filename', 'trails/' + this.$route.params.id.split('-')[0] + '/camping/'); axios.post( /api/helper/amazon/upload , formData, { headers: { 'Content-Type': 'multipart/form-data' } });

Hasil:

Saya memiliki masalah yang sama, saya dapat melihat bahwa saya berhasil mengirim data file dengan alat dev saya tetapi di dalam pengontrol saya $request->file('file') saya kosong
komponen saya

menyerahkan formulir() {
this.formData =FormData baru();
this.formData.append('file',this.$refs.file.files[0]);
this.formData.append('analisis',this.analyticsForm.analysis);
this.formData.append('_method','PATCH');
axios.post('/analitik',
ini.formData
,{headers: {'Content-Type': 'multipart/form-data'}}).lalu(respons => this.isSubmittedRedirect(false,'/sources/'+this.source+'/description'+'') )
.catch((kesalahan) => console.log(kesalahan))
},

Saya menemukan bahwa melakukan apa pun dengan FormData adalah masalah, karena MVC sepertinya tidak suka mendapatkan sesuatu seperti itu, karena Anda harus menentukan Content-Type sebagai multipart/form-data dan itu melemparkan pengecualian ketika saya akan periksa if (!Request.Content.IsMimeMultipartContent()) { throw new HttpResponseException(HttpStatusCode.UnsupportedMediaType); } , seperti yang dikatakan situs Microsoft untuk dilakukan: https://docs.microsoft.com/en-us/aspnet/web-api/overview/advanced/sending-html-form-data-part- 2

Lebih baik hanya memasukkan file saya ke string base64:
https://stackoverflow.com/questions/37134433/convert-input-file-to-byte-array/49676679#49676679

Posting ini mungkin lebih relevan dengan cara melakukannya, karena saya menggunakan DropZone dalam contoh ini:
https://stackoverflow.com/questions/32556664/getting-byte-array-through-input-type-file/49660172#49660172

Dan saya membahasnya lebih detail, di sini: https://stackoverflow.com/questions/47574218/converting-from-blob-to-binary-to-save-it-to-mongodb/49660839#49660839

Lalu saya bisa membuat objek JSON:

const myObj = {
   file = myBase64String,
   title = "myfileTitle.jpg"`
   type = "image/jpeg"`
}

Alih-alih menggunakan aksioma, saya hanya menggunakan XMLHttpRequest.

 const xhr = new XMLHttpRequest();

Dan buka dan atur tajuk:

 xhr.open('POST', '/api/FileUpload/Post', true);
 xhr.setRequestHeader('Content-Type', 'application/json;charset=UTF-8' );
 xhr.withCredentials = true;

Saya mengatur onreadystatechange untuk menangkap respons:

xhr.onreadystatechange = (response) =>
    if (xhr.readyState === 4 && xhr.status === 200) {
        console.log(response.target.responseText);
    }
}

dan kirim:

 xhr.send(JSON.stringify(myObj));

Jika Anda menggunakan axios, itu mungkin:

try {
    var axios = require('axios');
    const config = {
        headers: {
            'Content-Type': 'application/json;charset=UTF-8',
        }
    }
    await axios.post('https://example.com/api/upload/post', myObj, config)
        .then(function (response) {
             console.log(response);
         })
         .catch(function (error) {
             console.log(error);
         });
}
catch(e) { console.log(e); }

Di sisi MVC, Anda memerlukan model yang cocok:

public class MyModel {
    public string file { get; set; }
    public string title { get; set; }
    public string type { get; set; }
}

dan kemudian menjadikannya sebagai parameter dalam panggilan Postingan Anda dengan tag [FromBody]:

[System.Web.Http.HttpPost]
public virtual JsonResult<string> Post([FromBody]MyModel myModelObject)
{
    string strBase64FileString = myModelObject.file;
    string strTitle = myModelObject.title;
    string strFileType = myModelObject.type;

    return Json(JsonConvert.SerializeObject(new { file = myModelObject.file, title = myModelObject.title, myModelObject.type }));
}

Anda harus mendapatkan kembali apa yang Anda kirim. Catatan, jika Anda menerapkan ini sebagai pengujian, lakukan dengan file yang sangat kecil, sehingga Anda tidak menunggu selamanya dengan potensi mengunci browser/memori sistem Anda.

@navyjax2
Saya melakukan seperti yang Anda katakan, itu berfungsi dengan file kecil tetapi saya perlu mengirim file besar (> 250Mo), dan ya itu mengunci browser saya

Ya, untuk itu, Anda mungkin ingin memecah array file menjadi potongan-potongan dengan ukuran yang dapat dikelola dan mengirimkan blok, memiliki metode di sisi lain (sisi server) yang dapat menggabungkannya kembali, dan memberikan parameter sehingga tahu potongan mana itu (1, 2, 3, dll.) dan berapa banyak total potongan yang diharapkan sebelum memproses file di sisi server. Tapi saya pikir, apa pun yang Anda lakukan, dengan file sebesar itu, Anda harus menunggunya untuk melakukan tugasnya. Harus berhati-hati dengan manajemen memori jika Anda melakukannya dengan cara chunk juga, karena Anda harus memastikan Anda menghapus atau menggunakan kembali variabel Anda setiap kali dan tidak membuat ulang versi baru dari variabel yang sama setiap kali Anda melakukan blok. Salah satu dari beberapa kali variabel global bagus - atau hanya disetel ke bidang model setiap kali dijalankan.

Saya setuju dengan @epferrari , mohon pertimbangkan untuk membuka kembali masalah ini.
Tidak apa-apa mengirim string base64 dengan FormData di chrome, tetapi tidak bisa menyelesaikannya dengan aksio di node (v8.9.3).
Dan itu bekerja dengan pengambilan simpul...

const fetch = require('node-fetch')
const axios = require('axios')
const FormData = require('form-data')
const base64Img = require('base64-img')

const b64 = base64Img.base64Sync('./test.jpg').split('base64,')[1]
const form = new FormData()
form.append('b64_data', b64)
const headers = form.getHeaders()

// with node-fetch it worked
fetch('http://some.url', {
  method: 'POST',
  body: form,
  headers,
}).then(res => res.text()).then(console.log).catch(console.log)

// not working with axios
axios({
  method: 'POST',
  url: 'http://some.url',
  data: form,
  headers,
}).then(console.log).catch(console.log)

=== memperbarui ===
Saya tidak mengerti, saya menggunakan tajuk yang sama untuk pengambilan simpul dan aksio, dan tampaknya mereka memposting data formulir yang sama ke server, kenapa akhirnya berbeda?
Omong-omong, url asli yang saya posting berasal dari sini , yang saya lakukan adalah mengejek permintaan http browser dengan nodejs, untuk mengirim gambar ke server dan mendapatkan tautan kembali.

Saya menyiasatinya dengan menggunakan:

<input onChange="emitImageInfo(this)" type="file" multiple>

function emitImageInfo($event){
  let files = $event.target.files
  let formData = new FormData();

  for (let i = 0; i < files.length; i++)
      formData.append('image[' + i + ']', files[i])

  axios.post('file/upload', formData)
     .then((result) => { console.log('got it') })
     .catch((err) => { console.log(err) })
}

ini berhasil:

axios.post(localhost:3000/items, formData, { header: { 'Content-Type': 'multipart/form-data' }});

Saya memiliki masalah yang sama

tidak bekerja dengan golang

Temukan saja cara sederhana di Vue, tapi saya pikir itu bisa digunakan di situasi lain.😀
Back-end: Express.js dan paket express-fileupload.

<template>
  <div>
    <input type="file"
           name=""
           id="file-upload"
           multiple
           @change="filesChange($event.target.files)">
    <button @click="handleSubmit">Send</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      formData: new FormData(),
    };
  },
  methods: {
    filesChange(fileList) {
      // First: append file to FormData
      Array.from(Array(fileList.length).keys()).map(x => {
        this.formData.append(fileList[x].name, fileList[x]);
      });
    },
    handleSubmit() {
      // Append Text
      this.formData.append('username', 'Jeremy');

      // Append Number: Will be string
      this.formData.append('number', 9527);

      // Append Array: Need to be converted to a string
      this.formData.append('arrData', JSON.stringify([1, 2, 3]));

      // Append Array: Need to be converted to a string
      this.formData.append(
        'objData',
        JSON.stringify({ name: 'Jeremy', age: 28 })
      );

      this.axios({
        method: 'post',
        url: `file/multi-users`,
        data: this.formData,
      }).then(res => {
        console.log(res);
      });
    },
  },
};
</script>

Bahkan kami menghadapi masalah yang sama. Header tipe konten telah dihapus dari skrip java reaksi dan kemudian berfungsi dengan baik. Sebelumnya batas tidak diatur ketika Anda secara eksplisit mengatur dalam tipe konten

EDIT: Setelah membaca lebih lanjut tentang itu, tampaknya Express adalah masalah di pihak saya. Semoga ini bisa bermanfaat bagi orang lain

Masalah yang sama di sini. @nickuraltsev SANGAT merekomendasikan untuk membuka kembali masalah ini.

Saya mencoba memposting file ke server node saya melalui axios menggunakan kode berikut:

let ff = new FileReader();
ff.onload = (ev) => {
      var result = ev.target.result;
      console.log(`result: ${result} of type ${typeof(result)}`);
      axios.post('/test', {
                 file: result
                 })
                 .then((response) => {
                         console.log(`Response: ${response}`)
                  })
                  .catch((err) => {
                        console.log(`Test error: ${err}`);
                   })
}

var sampleFile = //getting the file here
ff.readAsArrayBuffer(sampleFile);

Isi permintaan benar-benar kosong di sisi server

Mencoba mengirim file secara langsung, membaca file sebagai ArrayBuffer dan membaca file sebagai teks (meskipun payload terlalu besar) dan ketiganya tidak berfungsi.

Dua tahun terakhir:
Permasalahan yang sama...

@demeter-macik terima kasih, menambahkan batas berhasil untuk saya :smile:

    const form = new FormData();
    form.append('email', '[email protected]');
    form.append('phone_no', '63');
    form.append('phone_code', '9179303100');

    if (logo) {
      form.append('logo', logo);
    }

    const response = await axios({
      method: 'post',
      url: `${apiUrl}users`,
      data: form,
      headers: {
        'content-type': `multipart/form-data; boundary=${form._boundary}`,
      },
    });

Ini pasti bekerja untuk saya — semua browser, termasuk Safari iOS.

Kode saya kira-kira seperti ini:

fungsi samplePost (config) {

// save reference this

let that = this;



// can optionally pull in form fields from an existing HTML form)

let myForm = document.getElementById('myForm');

let myFormData = new FormData(myForm);



// add in data from config.data if applicable

if (config && config.data) {

    that.objToStr(config.data, '', myFormData);



    for (let n2 in config.data) {

        if (config.data.hasOwnProperty(n2)) {

            myFormData.set(n2, config.data[n2]);

        }

    }

}



if (config.binaryFiles && config.binaryFiles.length > 0) {



    for (let i = 0; i < config.binaryFiles.length; i = i + 1) {

        let thisFile = config.binaryFiles[i];

        myFormData.append(thisFile.fieldName, thisFile.binaryData, thisFile.fileName)

    }

}





let axiosConfig = {

    method: 'post',

    url: config.url,

    data: myFormData,



    onUploadProgress: config.onUploadProgress,

};



if (config && config.binaryFiles && config.binaryFiles.length > 0) {

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

}

else {

    axiosConfig.headers = {'Content-Type': 'application/x-www-form-urlencoded'};

}



const ax = axios.create();

// note that passing in config to the constructor is broken as of axios v0.19.0-beta.1

// So we work around by passing in config to the request() method



ax.request(axiosConfig)

    .then(function (response) {

        // handle success



        alert(response.data);



    })

};

// panggil samplePost untuk mengunggah

contohPos({

url: 'async',

data: {somefield: 'some value'}, //note: passes in as form fields



// optionally include array of binary files

binaryFiles: thisFileList

});

Dari: Antonio Vázquez [email protected]
Dikirim: Selasa, 11 September 2018 11:23
Kepada: axios/axios [email protected]
Cc: DavidRueter [email protected] ; Komentar [email protected]
Subjek: Re: [axios/axios] Tidak dapat membuat .posting dengan 'Content-Type': 'multipart/form-data' berfungsi (#318)

4 jam dan terus bertambah untuk membuat permintaan posting dari Safari. Masih tidak terjadi ... apa sih guys??

Tidak ada solusi di sini yang berfungsi dari saya ... :(

—
Anda menerima ini karena Anda berkomentar.
Balas email ini secara langsung, lihat di GitHub https://github.com/axios/axios/issues/318#issuecomment-420371510 , atau matikan utasnya https://github.com/notifications/unsubscribe-auth/AFbi6JQBv06LTwL4z3HIAlvXAXDyps1- ks5uZ_9wgaJpZM4Ibm_z . https://github.com/notifications/beacon/AFbi6BSPfwPvNaWPFSdvtLKRYXS1m4uKks5uZ_9wgaJpZM4Ibm_z.gif

ini bekerja untuk saya juga, terima kasih @arvi

twiliosms = asinkron (Codigo) => {

var FormData = membutuhkan('form-data');
var fs = membutuhkan('fs');

var form = formData baru();
form.append('Kepada', '+524772773737');
form.append('Dari', '+737373737');
form.append('Tubuh', Codigo);

mencoba {
let axapi = menunggu aksio(
{
url: '2010-04-01/Accounts/AC8aa53c907943af79234414bb725c2cd3/Messages.json',
baseURL: 'https://api.twilio.com',
header: {'tipe konten': multipart/form-data; boundary=${form._boundary} ,},
data: bentuk,
autentik: {
nama pengguna: 'AC8aa53c907943af79234414bb725c2cd3',
kata sandi: * ,
},
metode: 'posting',
}
)

} tangkap (e) {console.error(e)}
}

Saya berkeliaran di perpustakaan ini masih membutuhkan solusi yang ditulis sendiri untuk posting data formulir ....

Perubahan apapun?

Saya memiliki kesalahan serupa di NodeJS 10.11.0 dan Axios 0.18.0 (lihat #1892). Saya sudah mencoba perbaikan @arvi tetapi tidak berhasil.

bagi saya, ini berfungsi:

let formData = new FormData(document.querySelector('#form'));

axios.post("/api/xxx", formData).then(console.log).catch(console.error)

dan ini tidak akan berhasil

let formData = new FormData(document.querySelector('#form'));

axios.post("/api/xxx", {data: formData}).then(console.log).catch(console.error)

perhatikan format param postdata harus (url , FormData) , bukan (url, {data: FormData})

beforeAll(function (done) {

          //parse form fields
          var parsefields = function(req,res){
            var form = new formidable.IncomingForm();
            form.parse(req, function (err, fields, files) {
              if (err) res.status(404).json(err)
              else res.status(200).json(fields);
            });  
          }

          router.route('parsefields').post(parsefields)

          //start server
          s = express()
          s.use('/',router)
          s.listen(4000,(err)=>{done(err)})
          done()
        });

        it('should parse and return form fields', function (done) {

          const fd = new FormData()
          fd.append('key','value')

          axios({
            method: 'POST',
            url: 'http://localhost:4000/parsefields',
            data: fd,
            headers : fd.getHeaders(),
          }).then(function (res) {
            expect(res).to.exist
            expect(res.body.key).to.equals('value')
          }).catch(err => {
            expect(err).not.to.exist
          })
          done()

        });
});

Saya mengalami masalah yang sama. Menerima 404 tanpa kesalahan. Menggunakan formidable untuk form parser, express dan axios.

Saya tidak tahu apakah ini membantu siapa pun, tetapi saya melihat masalah ini hanya di Safari dan memperbaikinya dengan menggunakan formdata-polyfill . Safari seharusnya mendukung FormData.append() secara asli tetapi mungkin implementasinya sedikit berbeda?

EDIT: Saya salah: Saya menggunakan URL yang dibuat dari Blob. Begitu saya mulai menggunakan gumpalan yang benar, semuanya bekerja seperti pesona!

Saya memiliki masalah yang sama dengan Blob saat saya dapat mengunggah File. Mengonversi dari Blob ke File itu sederhana tetapi saya ingin tahu apakah ini bug atau saya salah mengartikan sintaksnya:

`` js upload () { let data = new FormData() data.append('file', this.croppedFile) data.append('blob', this.croppedBlob, 'blob.jpeg') axios.post('/api/fp/process/', data, { headers: { 'Accept': teks/polos`,
},
})

croppedFile is derived from croppedBlob with this simple code:
   `   return new File([this.cropImg], this.file.name, { type: this.file.type })`

Firefox dev tools show:

------WebKitFormBoundarytmInU7WtcHvmgYbc
Isi-Disposisi: formulir-data; nama = "gumpalan"

------WebKitFormBoundarytmInU7WtcHvmgYbc
Isi-Disposisi: formulir-data; nama="berkas"; nama file="dscn2950.jpg"
Tipe Konten: image/jpeg

gumpalan:http :// localhost:8080/9a6446d1-1ca2-4fd3-a6c8-8b36d863c146
------WebKitFormBoundarytmInU7WtcHvmgYbc--

```
Menurut dokumentasi mozilla formData.append sepertinya saya bisa menggunakan objek Blob.

Yang membuat saya macet adalah server saya tidak menangani file dengan benar, menggunakan https://www.npmjs.com/package/mutter memperbaikinya

itu berguna bagi saya! Terima kasih!

Tidak ada yang berhasil untuk saya karena kode saya sangat bagus.
Masalah sebenarnya adalah dengan file yang saya seret dari hasil pencarian windows - Chrome tidak dapat menemukan lokasi sebenarnya dan itu merusak seluruh penguraian FormData. Menavigasi ke file dan menyeretnya memecahkan masalah.

Halo semua,
Tolong bantu aku.

POSTING https://www.googleapis.com/upload/drive/v3/files?uploadType=multipart HTTP/1.1
Otorisasi: Pembawa [YOUR_AUTH_TOKEN]
Tipe-Konten: multi-bagian/terkait; batas=foo_bar_baz
Panjang Konten: [NUMBER_OF_BYTES_IN_ENTIRE_REQUEST_BODY]

--foo_bar_baz
Tipe-Konten: aplikasi/json; rangkaian karakter = UTF-8

{
"nama": "objek saya"
}

--foo_bar_baz
Tipe Konten: image/jpeg

[JPEG_DATA]
--foo_bar_baz--

axios tidak mendukung jenis permintaan multi-bagian/terkait

Bagi saya itu (saya kira) tegukan. Karena saya mendapatkan kesalahan dengan file yang diperkecil di server saya. Saya menghapus semuanya secara manual dari folder dist, membiarkan tipe konten tidak terdefinisi dan semuanya berfungsi seperti yang diharapkan.
Jadi Anda akan memiliki sth seperti:

formdata.append("selectPaymentType", $scope.extraFields.selectPaymentType);
formdata.append("pickupMethod", $scope.extraFields.selectPickupType);
biarkan permintaan = {
metode: 'POSTING',
url: baseURL + 'pesanan',
data: formdata,
header: {
'Jenis Konten': tidak ditentukan,
'x-access-token': $scope.userToken
}
};
$http(permintaan)
.sukses(fungsi (d) {})
.error(fungsi () {});

PS: Ini kutipannya ... Saya juga melampirkan file dan banyak lagi bidang ...

SERVER:

var form = new multiparty.Form({uploadDir : './uploads/orders/'});

form.parse(req, function(err, field, files) {
//KODE ANDA DI SINI
})

hii plz saya butuh bantuan: saya mendapat "file: Nilai ini tidak boleh kosong." ketika saya mencoba mengambil posting gambar menggunakan fetch :
handleSubmit = (event) => { event.preventDefault(); //const { category } = this.state; console.log(this.state.file) let formData = new FormData(); formData.append("file",this.state.file); formData.append("name",this.state.name); alert('You Added a new Category Named ' + this.state.file); fetch(`${process.env.REACT_APP_BASE_URL}/category/image`, { method: 'POST', body: formData }).then(res => res.json()).then(err => console.log(err)); } konstruktor(alat peraga) {
super(alat peraga);

this.state = {

    name: '',
    file: null
  ,
  isLoaded: false,
  isEditMode: false,

}

}
```

Bagi siapa pun, ini berhasil untuk saya.
Jika menggunakan file input, Anda harus menggunakan MULTER di router.post('/') Anda seperti middleware, sebelum mendapatkan kolom input lainnya.

periksa axios.create Anda, header ini harus "headers:{}" dan tidak menggunakan data.seperti ini :
var contoh = axios.create({
header: {
// 'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8',
},
// data: {},
parameter: {}
});

Sampai hari ini, ini tidak berfungsi pada nodejs. Pendekatan request-promise juga berhasil untuk saya.

Menghabiskan 2 hari mencoba agar ini berfungsi dengan axios di nodejs. Menghabiskan 30 detik untuk benar-benar membuatnya bekerja dengan request-promise di nodejs.

Saya mencoba solusi yang berbeda tetapi pada akhirnya saya menangani masalah ini dengan menambahkan tajuk:

const FormData = require('form-data')
const axios = require('axios')

const form = new FormData()
form.append('foo', 'bar')

await axios.post('http://myserver', form, { headers: form.getHeaders() })

@Googrosh Ya. Ya. Ya.

Menghabiskan setengah hari mencari tahu apakah itu terkait dengan konfigurasi klien atau server.
Pada akhirnya, headers: form.getHeaders() berhasil.

Pindah ke got karena hanya _bekerja_ dengan formData dan multipart/form-data - https://github.com/sindresorhus/got
Tutup, tapi tidak ada cerutu Axios

  const form = new FormData()
  const stream = fs.createReadStream(file.path)

  form.append('file', stream, file.name)

  try {
    await got.post('http://example.com', { body: form })
  } catch (error) {
    next(error)
  }

Anda dapat melakukannya dengan cara ini:
handleSubmit = (e: any) => {
e.preventDefault();
const data = new FormData();
data.append('product_csv', this.state.csvfile);
biarkan accessToken = localStorage.getItem('access_token');
aksio
.post('/upload', data,
{ header:
{ 'Content-Type': 'multipart/form-data', Otorisasi: accessToken }
})
.kemudian(res => {
console.log('res', res);
});
};

@Googrosh Brilliant, .getHeaders() membuatnya bekerja untuk saya juga. Saya tidak bisa memberi tahu Anda berapa jam yang saya habiskan untuk ini. Terima kasih!

Saya menggunakan reaksi-asli. Dan saya mengakhiri masalah ini dengan menggunakan rn-fetch-blob . Sangat buruk :(

Saya memiliki masalah yang sama, itu tidak berfungsi dengan FormData sederhana tanpa file apa pun dan .getHeaders() tidak membantu. Dipindahkan ke "punya" lib yang berfungsi. Disebutkan di sini juga https://github.com/form-data/form-data/issues/458 (Saya menggunakan Node v12)

2020 ES6 cara melakukannya

Memiliki formulir dalam html saya mengikat data seperti:

DATA:

form: {
   name: 'Joan Cap de porc',
   email: '[email protected]',
   phone: 2323,
   query: 'cap d\ou'
   file: null,
   legal: false
},

diKirim:

async submitForm() {
  const formData = new FormData()
  Object.keys(this.form).forEach((key) => {
    formData.append(key, this.form[key])
  })

  try {
    await this.$axios.post('/ajax/contact/contact-us', formData)
    this.$emit('formSent')
  } catch (err) {
    this.errors.push('form_error')
  }
}

Lihat: https://github.com/axios/axios/issues/789#issuecomment -508114703

Di pihak penerima, jika Anda menggunakan Express, Anda perlu multir . body-parser tidak menangani permintaan multipart parsing.

@DespertaWeb Tidak berfungsi ketika tidak ada file.