Axios: لا يمكن الحصول على منشور. مع "نوع المحتوى": "متعدد الأجزاء / بيانات النموذج" للعمل

الكود يبدو جيدا بالنسبة لي (لست بحاجة إلى تعيين نوع المحتوى ، لكن هذا ليس مهمًا.) ماذا يحدث عندما تحاول إرسال طلب عبر أكسيوس؟

لقد لاحظت أن تعيين نوع المحتوى أو عدمه لا يغير أي شيء في هذه الحالة. عندما أحاول إرسال الطلب مع AXIOS، يبدو أن البيانات تبدو كسلسلة فارغة، بحيث تستجيب الخلفية مع وجود خطأ يتعلق بالمعلمات المفقودة.

كنت أستخدم 0.9.1 ولكن المشكلة تستمر في 0.11.0.

يُرجى إعلامي إذا كان هناك أي شيء آخر يمكنني القيام به للمساعدة في تصحيح هذا الخطأ ، حسنًا؟
tksnickuraltsev !

هل يمكنك إلقاء نظرة على الشكل الذي تبدو عليه طلباتك في لوحة شبكة Chrome Dev Tools وتقديم لقطة شاشة إن أمكن؟

nickuraltsev معرفة ما إذا كان هذا يساعد:

أعتقد أن رؤوس الطلبات خاطئة.

لذلك لا يوجد طلب حمولة؟

حسنًا ، يجب أن يكون لدينا ولكن البيانات تذهب كسلسلة فارغة. لا أعرف ما الذي قد يكسرها (بالنظر إلى الكود الذي شاركته في أول مشاركة لي).

أرى. ولا يوجد قسم "طلب الحمولة الصافية" لطلباتك في Dev Tools ، أليس كذلك؟

من المحتمل أن يكون هناك مشكلة في رأس الصفحة. عند تعيين نوع المحتوى في كائن التكوين في الطلب ، يتم تسلسله على سبيل المثال
axios.post (
"https://example.com/login" ،
{emailAddress: email، password: hashedPassword} ،
{headers: {'content-type': 'application / json'}}
) ؛

يأتي نوع محتوى الرأس في صورة application / json ، application / json
لن يتم تحليل الجسم في هذه الحالة

تضمين التغريدة ما تراه في لقطة الشاشة هذه هو كل ما لدي في أدوات التطوير.
قد يكون rrapant صحيحًا ، لكنني على يقين من أن تعيين 'Content-Type' أو لا ، على الأقل في هذه الحالة ، لم يغير شيئًا. سأضطر إلى التحقق مرة أخرى للتأكد.

rrapant تم إصلاح المشكلة المتعلقة بقيم نوع المحتوى المكررة بواسطة # 317. سيتم تضمين الإصلاح في الإصدار التالي. شكرا لك!

rafaelbiten لقد حاولت للتو إعادة إظهار المشكلة ولكن دون جدوى. لقد استخدمت الكود التالي:

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

تم إرسال البيانات إلى الخادم بنجاح:

rafaelbiten هل يمكنك محاولة إرسال طلب باستخدام FromData إلى http://httpbin.org/post كما هو الحال في مقتطف الشفرة الخاص بي؟

إغلاق هذا الآن. لا تتردد في إعادة فتح إذا لزم الأمر.

مرحبًا nickuraltsev ، لدي نفس المشكلة.

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

الرجاء العثور على لقطة شاشة لمعلومات الرأس الخاصة بي أدناه ،

لدي سؤال ، هل تدعم المحاور إرسال ملفات بيانات متعددة الأجزاء إلى خادم العقدة؟ _

Sreekhar لا أعرف ما إذا كان سيعمل ، لكن هل يمكنك إضافة FormData كمتغير ثانٍ بدلاً من تغليفه في كائن آخر؟
axios.post('/dataAPI/sendFile', fd, config)

إذا كنت بحاجة إلى استخدام "UploadCommand" كاسم للجزء حيث يوجد الملف ، فأنت بحاجة إلى استخدامه
fd.append('UploadCommand', this.refs.multipartfiles.files[0]);

yungpanda لقد وجدت بديلاً للقيام بذلك. أعتقد أنني سأضطر إلى إعادة إنشاء API الآن. على أي حال سأحاول وأتحقق مما إذا كان يعمل ، سأحافظ على تحديث الموضوع. شكرا لردك.

Sreekhar اضبط نوع المحتوى على غير محدد للسماح للمتصفح بتغييره إلى بيانات متعددة الأجزاء / نموذج وإضافة حدود تلقائيًا

nickuraltsev هذا مثال بسيط لا يعمل على العقدة:

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

خطأ: اكتب بعد النهاية

krzkaczor هل وجدت أي طريقة أخرى لإرسال بيانات متعددة الأجزاء / النموذج باستخدام axios؟

PierreCavalet كلا ، لقد استخدمت request-promise بدلاً من ذلك.

krzkaczor بفضل ، اضطر للتبديل أيضا

krzkaczor حاول إضافة نوع المحتوى إذا لم تكن قد فعلت ذلك بالفعل

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 أواجه أيضًا نفس المشكلة مع axios و multipart / form-data. هل يمكنك نشر جوهر الكود الذي استخدمته مع وعد بالطلب.

@ dan-boa هنا اذهب: https://gist.github.com/krzkaczor/bdbe09d4096b051a3c18387c4ca79a06 كما يوضح الاختراق كيفية إرسال سلسلة كملف (مسار الإعداد)

إذا كان أي شخص يتساءل ، فإليك مثالاً على كيفية استخدام FormData مع axios . يجب عليك أساسًا دفق البيانات إلى مخزن مؤقت وتمرير الرؤوس الصحيحة.

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

واجهت نفس المشكلة (في المتصفح ، وليس في العقدة). تبين أنه يعمل إذا لم تقم بتعيين رأس Content-Type على الإطلاق وترك المحاور لمعرفة الأشياء (تحقق أيضًا مما إذا لم تقم بتعيين هذا العنوان كافتراضي في معترضات axios أيضًا. إذا كنت بحاجة إلى بعض الإعدادات الافتراضية لبقية استدعاءات واجهة برمجة التطبيقات ، يمكنك إنشاء مثيل axios منفصل لطلبات FormData ())

انتهى بي الأمر بطلب وعد في جانب العقدة عند محاولة التحميل إلى خادم بعيد آخر.

لقد تحولت إلى طلب الوعد لنفس السبب. الحب أكسيوس على الرغم من ذلك!

guncha لقد نجح مثالك معي في 0.15.3 ، حتى حاولت تحميل ملف ثنائي ، انتهى به الأمر بترميز UTF8. تم إخبار concat باستخدام مخزن مؤقت بإصلاح المشكلة.

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

بدلاً من ذلك ، سأستخدم الوعد:

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 تعمل لدي. شكرا لكم

نفس المشكلة هنا

فقط أضف الحد إلى 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);
    });

مهلا،
أحصل على هذا الملف بتنسيق json ، هل يمكن لأي شخص مساعدتي في كيفية تحويله إلى ملف متعدد الأجزاء.
المنصة المستخدمة هي 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"
شكرا

تعمل التعليمات البرمجية في المستعرض ولكن ليس على العقدة.

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

مرحبًاSreekhar
بالنسبة لي لقد غيرت التكوين إلى
const config = { headers: { 'Content-Type': 'application/json' } };
وعملت بشكل جيد

الرجاء إعادة الفتح حتى يكون هناك إجابة / سير عمل متسق لهذا. يبدو أن الكثير من الأشخاص ما زالوا يواجهون مشكلات في هذا الأمر.

+1 فتح

يبدو أن منشورات HTTP التي تتضمن بيانات ملف ثنائي تعمل بشكل جيد في 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);
    });

            }

أيضًا عند استخدام المخازن المؤقتة لتمثيل الملف ، نجح ذلك بالنسبة لي:

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

من المهم ملاحظة: لا يعمل أي من الحلول المذكورة أعلاه إذا كان لديك أي معلمات بيانات افتراضية تم تعيينها في الإعدادات الافتراضية لمثيل Axios. يمكنك أيضًا التحقق مما إذا كنت تحدد رأس نوع المحتوى الافتراضي في مثيل Axios (عبر axios.defaults.headers و axios.defaults.parameters).

قد لا يكون هذا صحيحًا ، ولكن قد تكون المشكلة متعلقة باستخدام body-parser من جانب الخادم. كنت أعاني من مشكلة مماثلة وركضت عبر هذا المنشور:

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

TL ؛ DR - body-parser لا يتعامل مع بيانات متعددة الأجزاء / النموذج. بمعنى آخر ، axios ليس هو المشكلة و body-parser هو. قد يكون هذا هو سبب عمل الحلول العازلة المذكورة أعلاه.

أفترض أن هذه الوظيفة هي لأسباب أمنية ، كما هو مذكور هنا:

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

وآمل أن يساعد شخص ما!

لدي نفس المشكلة. أستخدم Axios 0.16.2 وأرسل عن طريق XMLHttpRequest ، لكن ليس عن طريق Axios.

لدي كائن FormData أساسي:

const formData = new FormData () ؛
formData.append ('name'، 'textName') ؛

جربت اقتراح Janekk :

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

ثم اقتراح faalkhah :

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

أو اقتراح askona :

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

رأس الطلب هو application/json و formData فارغ.

لا أعرف كيف أحاول إصلاح @ demeter-macik ، لأنه يبدو أنه يعمل فقط في النهاية الخلفية https://stackoverflow.com/a/13454425/968379

أهلا بكم،
لدي نفس المشكلة
الكود الخاص بي في العميل
"

    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)`

في خادم الأشرعة ، أقوم بتسجيل وحدة التحكم req.body
لقد وجدت ، عندما أتصل بالطلب 10 مرات ، هناك حوالي 3 4 مرات لا يستقبل الخادم الجسم (الجسم فارغ).
لقد تحققت في devtool الخاص بـ chrome ، لا يزال الطلب ينقل الملف والجسم في الحمولة.
ما زلت لم أفهم السبب ، لكن لدي حل

هذا هو عنوان الطلب.

`كود

    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)`

مرحبا Sreekhar ،
هل حللت المشكلة ؟ لم أجد الحل ، هل يمكن لأحد أن يساعدني ، من فضلك.
أيضا ، شكرا لك مقدما

مرحبا،

كنت أحاول نشر بيانات متعددة الأشكال (إنها واجهة برمجة تطبيقات SMS Eztext)
باستخدام محاور مع node.js.

يعمل بشكل جيد مع التعليمات البرمجية التالية ،
إرجاع الوعد الجديد (الوظيفة (حل ، رفض) {

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

لكنه لا يعمل مع axios حيث لا يتم إرسال الرسائل القصيرة ولكني أحصل على رمز الحالة كـ 200 للطلب التالي: -
var axios = يتطلب ('axios') ؛

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

لماذا يعد طلب النشر ناجحًا مع مكتبة "الطلب" وليس مع Axios؟

هل حاولت تحويل البيانات من JSON إلى FormData دون تعيين أي رأس؟
يجب معالجة رؤوس البيانات (أي إلى جانب رؤوس المصادقة) تلقائيًا

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

للتحويل من JSON إلى FormData ، استخدم شيئًا مثل هذا في هذه الإجابة

تذكر أن المفاتيح المتداخلة يصعب التعامل معها. على سبيل المثال ، عند إرسال البيانات إلى الواجهة الخلفية الخاصة بنا ، فإنه يعمل إذا قمنا بتسويتها على النحو التالي:

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

نفس المشكلة هنا.

بالطبع ،michaelscheurer! لا يكفي تعيين رؤوس الطلب: يجب عليك إرسال FormData لكي تعمل. إنه كائن متصفح سيتم إجراء تسلسل له مع جميع الحدود المناسبة للعمل مع الطلب ... ولن يقوم axios أو vanilla js بتحويل بيانات JSON إلى FormData نيابة عنك. سيتعرف Axios على أنه FormData ويقوم أيضًا بتعيين الرؤوس لك ، لذلك لا تحتاج حقًا إلى تعيينها
حاول اتباع تلميحات إجابتي السابقة ...

تضمين التغريدة
لقد حاولت اتباع شيء وفقًا لاقتراحك ولكن لم يحالفني الحظ ،،، نفس السلوك كما حصلت على الحالة 200 موافق ولكن لا يتم إرسال الرسائل القصيرة مع الطلب التالي
var axios = يتطلب ('axios') ؛

    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 هل تستخدم node.js أو المتصفح؟

في المتصفح ، لا تحتاج إلى const FormData = require('form-data'); لأن FormData هو أصلي.

علاوة على ذلك ، حاول دون تعيين الرؤوس والأسئلة ، أو حاول

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

كما ذكرت ، يجب أن يضبط الرؤوس تلقائيًا في المتصفح

@ Ruchi2729 أرى أنك تستخدم العقدة ، آسف.
أتذكر أنني استخدمت form-data مع axios مرة واحدة ولكني لا أتذكر ما إذا كانت تعمل بالفعل.

لكن هل أنت متأكد من أن هذه هي الطريقة الصحيحة لإرسال الرسائل النصية القصيرة مع النص الإلكتروني؟ يبدو الأمر مختلفًا من مستنداتهم ، حيث يجب عليك استخدام مفتاح api وعميل العقدة الخاص بهم ...

هل يمكننا إعادة فتح هذا؟ يبدو أن الكثير من الناس ما زالوا يصطدمون بهذا ، بما فيهم أنا. على سبيل المثال ، لا يصل هذا الطلب إلى الخادم كما هو متوقع عبر المحاور ، ولكن إذا قمت بإرسال نفس الملف عبر Postman كـ multipart/form-data ، فكل شيء يعمل.

تحرير: كانت مشكلتي تحاول إرسال بيانات uri مشفرة باستخدام base64 كبيانات نموذجية. إذا كان أي شخص آخر يعاني من نفس المشكلة ، فإليك بعض نماذج التعليمات البرمجية لتحويلها:

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

مرحبًا ، أشير إلى هذا المستند: - https://www.eztexting.com/developers/sms-api-documentation/rest#Sending
ما المستند الذي تشير إليه لمفتاح API وجميع؟

Ruchi2729
عذرًا ، لقد خلطت مع Nexmo ، وهي خدمة SMS أخرى ولديها عميل خاص بها للعقدة 😅

ولكن على أي حال ، وفقًا للوثائق التي أشرت إليها ، يمكنك تجنب FormData عن طريق تعيين format إلى json والسماح لـ axios بإرسال حمولة JSON (يمكنك السماح لها بتخمين الرؤوس ضمنيًا بواسطة تنسيق الحمولة)

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

لقد كافحت مع هذا لفترة أطول بكثير وأريد الاعتراف به ، لذلك آمل أن يساعد هذا شخصًا ما. أنا أستخدم axios و express و express-fileupload. يمكنني التحميل بنجاح إلى Node باستخدام المعلمات التي قمت بإلحاقها بـ FormData. ألتقط الملفات باستخدام ملفات req. وألتقط باقي بيانات النموذج باستخدام req.body ['yourfilename']

الخادم (سريع):

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

الواجهة الأمامية (أكسيوس)

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

نتيجة:

لدي نفس المشكلة ، أستطيع أن أرى أنني أرسل بيانات الملف بنجاح باستخدام أدوات التطوير الخاصة بي ولكن داخل جهاز التحكم الخاص بي ، طلب $-> ملف ('file') فارغ
المكون الخاص بي

تقديم النموذج() {
this.formData = new FormData () ؛
this.formData.append ('file'، this. $ refs.file.files [0])؛
this.formData.append ('تحليل'، this.analyticsForm.analysis)؛
this.formData.append ('_ method'، 'PATCH') ؛
axios.post ("/ analytics"،
this.formData
، {headers: {'Content-Type': 'multipart / form-data'}}). ثم (response => this.isSubmittedRedirect (false، '/ sources /' + this.source + '/ description' + ') )
.catch ((خطأ) => console.log (خطأ))
} ،

لقد اكتشفت أن القيام بأي شيء باستخدام FormData كان يمثل مشكلة ، نظرًا لأن MVC لا يبدو أنه يحب الحصول على أي شيء بهذه الطريقة ، لأنه يتعين عليك تحديد نوع المحتوى كـ multipart/form-data وكان يطرح استثناء عندما كنت check if (!Request.Content.IsMimeMultipartContent()) { throw new HttpResponseException(HttpStatusCode.UnsupportedMediaType); } ، كما يقول موقع Microsoft: https://docs.microsoft.com/en-us/aspnet/web-api/overview/advanced/sending-html-form-data-part- 2

كان من الأفضل فقط تحويل ملفي إلى سلسلة base64:
https://stackoverflow.com/questions/37134433/convert-input-file-to-byte-array/49676679#49676679

قد يكون هذا المنشور أكثر صلة بكيفية القيام بذلك ، حيث استخدمت DropZone في هذا المثال:
https://stackoverflow.com/questions/32556664/getting-byte-array-through-input-type-file/49660172#49660172

وأتناولها بمزيد من التفاصيل ، هنا: https://stackoverflow.com/questions/47574218/converting-from-blob-to-binary-to-save-it-to-mongodb/49660839#49660839

ثم يمكنني إنشاء كائن JSON:

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

بدلاً من استخدام axios ، استخدمت للتو XMLHttpRequest.

 const xhr = new XMLHttpRequest();

وافتح واضبط الرأس:

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

قمت بتعيين onreadystatechange لالتقاط الاستجابة:

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

وأرسل:

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

إذا كنت تستخدم أكسيوس ، فمن المحتمل أن يكون:

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

من ناحية MVC ، أنت بحاجة إلى نموذج مطابق:

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

ثم اجعل ذلك كمعامل في اتصالك الأخير بعلامة [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 }));
}

يجب أن تستعيد ما أرسلته. لاحظ ، إذا قمت بتنفيذ هذا كاختبار ، فقم بذلك باستخدام ملف صغير جدًا ، لذلك لن تنتظر إلى الأبد مع احتمال قفل متصفح / ذاكرة النظام.

تضمين التغريدة
كنت أفعل كما قلت ، لقد كان يعمل مع ملف صغير ولكني بحاجة إلى إرسال ملف كبير (> 250 ميجا) ، ونعم ، لقد كان يغلق المتصفح

نعم ، لذلك ، قد ترغب في تقسيم مصفوفة الملفات إلى أجزاء ذات حجم يمكن التحكم فيه وإرسال كتل ، مع وجود طريقة على الطرف الآخر (من جانب الخادم) يمكنها إعادة دمجها ، وإعطائها معلمة بحيث يعرف الجزء الذي هو (الأول ، الثاني ، الثالث ، إلخ.) وعدد الأجزاء الإجمالية التي يجب توقعها قبل أن يعالج الملف على جانب الخادم. لكنني أعتقد ، بغض النظر عما تفعله ، بملف بهذا الحجم ، عليك الانتظار حتى يقوم بعمله. سيتعين عليك توخي الحذر في إدارة الذاكرة إذا كنت تفعل ذلك بالطريقة المقطوعة أيضًا ، لأنه سيتعين عليك التأكد من أنك تقوم بمسح أو إعادة استخدام المتغيرات الخاصة بك في كل مرة وعدم إعادة إنشاء إصدارات جديدة من نفس المتغيرات في كل مرة تفعل كتلة. واحدة من المرات القليلة التي يكون فيها المتغير الشامل جيدًا - أو مجرد تعيين لحقل نموذج كل مرة.

أوافق على epferrari ، يرجى إعادة فتح هذه المشكلة.
لا بأس في إرسال سلسلة base64 مع FormData في الكروم ، ولكن لا يمكنك القيام بذلك باستخدام axios في العقدة (v8.9.3).
وهو يعمل مع node-fetch ...

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)

=== تحديث ===
لا أفهم ، أنا أستخدم نفس الرؤوس لجلب العقدة و axios ، ويبدو أنهم ينشرون نفس بيانات النموذج على الخادم ، فكيف ينتهي بهم الأمر بشكل مختلف؟
بالمناسبة ، عنوان url الحقيقي الذي أنشره يأتي من هنا ، ما أفعله هو السخرية من طلب http للمتصفح باستخدام nodejs ، لإرسال صورة إلى الخادم والحصول على رابط مرة أخرى.

لقد تمكنت من التغلب على هذا باستخدام:

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

نجح هذا:

axios.post (localhost: 3000 / items، formData، {headers: {'Content-Type': 'multipart / form-data'}})؛

لدي نفس المشكلة

لا تعمل مع golang

ما عليك سوى العثور على طريقة بسيطة في Vue ، لكنني أعتقد أنه يمكن استخدامها في مواقف أخرى
النهاية الخلفية: Express.js وحزمة تحميل الملفات السريعة.

<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>

حتى كنا نواجه نفس المشكلة. تمت إزالة رأس نوع المحتوى من برنامج جافا النصي للتفاعل ثم عمل بشكل جيد. في وقت سابق ، لم يتم إعداد الحدود عند تعيين نوع المحتوى بشكل صريح

تحرير: بعد مزيد من القراءة حول هذا الموضوع ، يبدو أن Express كان هو المشكلة من جانبي. نأمل أن يكون هذا مفيدًا للآخرين

نفس المشكلة هنا. Nickuraltsev سيوصي بشدة بإعادة فتح القضية.

أحاول نشر ملف على خادم العقدة الخاص بي عبر أكسيوس باستخدام الكود التالي:

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

نص الطلب فارغ تمامًا من جانب الخادم

حاولت إرسال الملف مباشرةً ، وقراءة الملف على أنه ArrayBuffer وقراءة الملف كنص (الحمولة كبيرة جدًا على الرغم من ذلك) ولم يعمل الثلاثة جميعًا.

بعد عامين:
نفس المشكلة...

بفضل @ demeter-macik ، أضافت الحدود عملت معي: ابتسامة:

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

هذا يعمل بالتأكيد بالنسبة لي - جميع المتصفحات ، بما في ذلك Safari iOS.

الكود الخاص بي هو شيء من هذا القبيل:

وظيفة 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);



    })

} ؛

// استدعاء samplePost للتحميل

samplePost ({

url: 'async',

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



// optionally include array of binary files

binaryFiles: thisFileList

}) ؛

من: أنطونيو فازكويز [email protected]
تاريخ الإرسال: الثلاثاء 11 سبتمبر 2018 الساعة 11:23 صباحًا
إلى: axios / axios [email protected]
نسخة إلى: DavidRueter [email protected] ؛ التعليق [email protected]
الموضوع: Re: [axios / axios] لا يمكن الحصول على منشور. مع "نوع المحتوى": "متعدد الأجزاء / بيانات النموذج" للعمل (# 318)

4 ساعات والعد لتقديم طلب آخر من Safari. مازال لم يحدث ... ماذا بحق الجحيم يا رفاق ؟؟

لا أحد من الحلول هنا يعمل مني ... :(

-
أنت تتلقى هذا لأنك علقت.
قم بالرد على هذا البريد الإلكتروني مباشرةً ، أو قم بعرضه على GitHub https://github.com/axios/axios/issues/318#issuecomment-420371510 ، أو تجاهل الموضوع https://github.com/notifications/unsubscribe-auth/AFbi6JQBv06LTwL4z3HIAlvXAXDyps1- ks5uZ_9wgaJpZM4Ibm_z . https://github.com/notifications/beacon/AFbi6BSPfwPvNaWPFSdvtLKRYXS1m4uKks5uZ_9wgaJpZM4Ibm_z.gif

لقد نجح هذا أيضًا بالنسبة لي ، شكرًا arvi

twiliosms = غير متزامن (Codigo) => {

var FormData = يتطلب ('form-data') ؛
var fs = تتطلب ('fs') ؛

var form = new FormData () ؛
form.append ("To"، "+524772773737") ؛
form.append ('From'، '+737373737') ؛
form.append ("الجسم" ، Codigo) ؛

يحاول {
دع أكسابي = انتظر أكسيوس (
{
url: '2010-04-01 / Accounts / AC8aa53c907943af79234414bb725c2cd3 / Messages.json'،
عنوان URL الأساسي: "https://api.twilio.com" ،
الرؤوس: {'content-type': multipart/form-data; boundary=${form._boundary} ،}،
البيانات: شكل ،
المصادقة: {
اسم المستخدم: "AC8aa53c907943af79234414bb725c2cd3" ،
كلمة المرور: * ،
} ،
الطريقة: "post"،
}
)

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

أنا أتجول في هذه المكتبة ما زلت بحاجة إلى حلول مكتوبة ذاتيًا لمشاركات بيانات النموذج ...

أي تحديث؟

لدي خطأ مشابه في NodeJS 10.11.0 و Axios 0.18.0 (انظر # 1892). لقد جربت إصلاح arvi ولكنه لا يعمل.

بالنسبة لي ، هذا يعمل:

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

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

وهذا لن ينجح

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

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

يجب الانتباه إلى أن تنسيق معلمة ما بعد البيانات يجب أن يكون (url , FormData) ، وليس (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()

        });
});

لدي نفس المشكلة. استلام 404 بدون خطأ. استخدام هائل لمحلل النموذج ، والتعبير ، والمحاور.

لا أعرف ما إذا كان هذا يساعد أي شخص ، لكنني كنت أرى هذه المشكلة فقط على Safari وقمت بإصلاحها باستخدام formdata-polyfill . يجب أن يدعم Safari FormData.append () أصلاً ولكن ربما يكون التنفيذ مختلفًا قليلاً؟

تحرير: كنت مخطئا: كنت أستخدم عنوان URL تم إنشاؤه من Blob. بمجرد أن بدأت باستخدام النقطة الصحيحة عملت كل شيء مثل السحر!

لدي نفس المشكلة مع Blob بينما يمكنني تحميل الملف. يعد التحويل من Blob إلى File أمرًا بسيطًا ، لكني أرغب في معرفة ما إذا كان هذا خطأ أو أنني أساءت تفسير الصيغة:

"نص / عادي" " 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': نص / عادي" ،
} ،
})

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
ترتيب المحتوى: نموذج البيانات ؛ الاسم = "blob"

------ WebKitFormBoundarytmInU7WtcHvmgYbc
ترتيب المحتوى: نموذج البيانات ؛ الاسم = "ملف" ؛ اسم الملف = "dscn2950.jpg"
نوع المحتوى: صورة / jpeg

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

""
وفقًا لتوثيق mozilla formData.append ، يبدو أنه يمكنني استخدام كائنات Blob.

ما جعلني عالقًا هو أن خادمي لم يكن يتعامل مع الملفات بشكل صحيح ، باستخدام https://www.npmjs.com/package/multer إصلاحه

إنه مفيد بالنسبة لي! شكرا!

لا شيء هنا يعمل معي لأن الكود الخاص بي كان جيدًا تمامًا.
كانت المشكلة الحقيقية تتعلق بالملف الذي كنت أسحبه من نتائج بحث Windows - لم يتمكن Chrome من العثور على الموقع الحقيقي وكسر تحليل FormData بالكامل. أدى الانتقال إلى الملف وسحبه إلى حل المشكلة.

أهلا بكم،
ساعدني من فضلك.

انشر https://www.googleapis.com/upload/drive/v3/files؟uploadType=multipart HTTP / 1.1
التفويض: الحامل [YOUR_AUTH_TOKEN]
نوع المحتوى: متعدد الأجزاء / ذات الصلة ؛ الحدود = foo_bar_baz
طول المحتوى: [NUMBER_OF_BYTES_IN_ENTIRE_REQUEST_BODY]

--foo_bar_baz
نوع المحتوى: application / json؛ محارف = UTF-8

{
"الاسم": "myObject"
}

--foo_bar_baz
نوع المحتوى: صورة / jpeg

[JPEG_DATA]
--foo_bar_baz--

لا يدعم axios نوع الطلب متعدد الأجزاء / ذي الصلة

بالنسبة لي كان (أعتقد) بلع. لأنني كنت أتلقى الخطأ مع الملفات المصغرة على الخادم الخاص بي. قمت بحذف كل شيء يدويًا من مجلد dist ، وتركت نوع المحتوى على أنه غير محدد ويعمل كل شيء كما هو متوقع.
لذلك سيكون لديك شيء مثل:

formdata.append ("selectPaymentType" ، $ range.extraFields.selectPaymentType) ؛
formdata.append ("pickupMethod"، $ scale.extraFields.selectPickupType) ؛
دع الطلب = {
الطريقة: "POST" ،
url: baseURL + "الطلبات"،
البيانات: Formdata ،
الرؤوس: {
"نوع المحتوى": غير محدد ،
'x-access-token': $ domain.userToken
}
} ؛
http $ (طلب)
.success (الوظيفة (د) {})
. Error (function () {}) ؛

ملاحظة: هذا مقتطف ... أرفق أيضًا ملفات والمزيد من الحقول ...

الخادم:

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

form.parse (req ، وظيفة (err ، حقول ، ملفات) {
// رمزك هنا
})

مرحبًا ، أحتاج إلى مساعدة: لقد حصلت على "ملف: يجب ألا تكون هذه القيمة فارغة." عندما أحاول جلب صورة ما باستخدام الجلب:
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)); } المُنشئ (الدعائم) {
سوبر (الدعائم) ؛

this.state = {

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

}

}
""

لأي شخص ، هذا عمل معي.
إذا كنت تستخدم ملف الإدخال ، فيجب عليك استخدام MULTER في router.post ('/') مثل البرامج الوسيطة ، قبل الحصول على حقول الإدخال الأخرى.

تحقق من axios.create ، يجب أن تكون هذه الرؤوس "headers: {}" ولا تستخدم بيانات. مثل هذا:
var مثال = axios.create ({
الرؤوس: {
// 'Content-Type': 'application / x-www-form-urlencoded ؛ charset = UTF-8' ،
} ،
// البيانات: {}،
المعلمات: {}
}) ؛

حتى يومنا هذا ، هذا لا يعمل على nodejs. نهج request-promise نجح أيضًا بالنسبة لي.

أمضيت يومين في محاولة لجعل هذا يعمل مع أكسيوس في nodejs. أمضيت 30 ثانية لجعلها تعمل بالفعل مع وعد بالطلب في nodejs.

لقد جربت حلولًا مختلفة ولكن في النهاية تعاملت مع هذه المشكلة بإضافة الرؤوس:

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 نعم. نعم. نعم.

أمضيت نصف يوم في معرفة ما إذا كان مرتبطًا بتكوين العميل أو الخادم.
في النهاية ، قام headers: form.getHeaders() بالمهمة.

انتقل إلى got لأنه _works_ فقط بـ formData و multipart/form-data - https://github.com/sindresorhus/got 🙌
إغلاق ، ولكن لا أكسيوس السيجار 👋

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

يمكنك القيام بذلك بهذه الطريقة:
handleSubmit = (e: any) => {
e.preventDefault () ؛
بيانات const = FormData () الجديد ؛
data.append ('product_csv'، this.state.csvfile) ؛
السماح لـ accessToken = localStorage.getItem ('access_token') ؛
أكسيوس
.post ('/ upload'، data،
{رؤوس:
{'نوع المحتوى': 'multiart / form-data'، Authorization: accessToken}
})
ثم (الدقة => {
console.log ('الدقة' ، الدقة) ؛
}) ؛
} ؛

@ Googrosh Brilliant ، .getHeaders() لقد نجح الأمر معي أيضًا. لا استطيع ان اقول لكم عدد الساعات التي قضيتها في هذا. شكرا!

أنا أستخدم رد الفعل الأصلي. وانتهيت من هذه المشكلة باستخدام rn-fetch-blob . سيء جدا :(

لدي نفس المشكلة ، إنها لا تعمل مع FormData البسيط بدون أي ملف ولا يساعد .getHeaders (). انتقل إلى "got" lib الذي يعمل فقط. تمت الإشارة إليه هنا أيضًا https://github.com/form-data/form-data/issues/458 (أنا أستخدم Node v12)

طريقة عمل 2020 ES6

وجود النموذج بلغة html قمت بربطه ببيانات مثل:

البيانات:

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

عند تقديم:

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

انظر: https://github.com/axios/axios/issues/789#issuecomment -508114703

في الطرف المستلم ، إذا كنت تستخدم Express ، فأنت بحاجة إلى multer . لا يعالج body-parser تحليل الطلبات متعددة الأجزاء.

DespertaWeb لا يعمل في حالة عدم وجود ملفات.