Ответ 1

Вы можете опубликовать данные axios с помощью FormData(), например:

var bodyFormData = new FormData();

А затем добавьте поля в форму, которую вы хотите отправить:

bodyFormData.set('userName', 'Fred');

Если вы загружаете изображения, вы можете использовать .append

bodyFormData.append('image', imageFile); 

И тогда вы можете использовать метод сообщения Axios (вы можете изменить его соответствующим образом)

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

Вы можете прочитать больше здесь

Ответ 2

В моем случае мне пришлось добавить границу к заголовку, как показано ниже:

const form = new FormData();
    formData.append(item.name, fs.createReadStream(pathToFile));

    const response = await axios({
        method: 'post',
        url: 'http://www.yourserver.com/upload',
        data: form,
        headers: {
        'content-type': 'multipart/form-data; boundary=${form._boundary}',
        },
    });

Это решение также полезно, если вы работаете с React Native.

Ответ 3

Проверьте строку запроса.

Вы можете использовать его следующим образом:

var querystring = require('querystring');
axios.post('http://something.com/', querystring.stringify({ foo: 'bar' }));

Ответ 4

Загрузить (несколько) двоичных файлов

Ситуация усложняется, когда вы хотите опубликовать файлы через multipart/form-data, особенно несколько двоичных файлов. Ниже приведен рабочий пример:

const FormData = require('form-data')
const fs = require('fs')
const path = require('path')
const concat = require('concat-stream')

const formData = new FormData()
formData.append('json', JSON.stringify({ to: [{ phoneNumber: process.env.RINGCENTRAL_RECEIVER }] }), 'test.json')
formData.append('attachment', fs.createReadStream(path.join(__dirname, 'test.png')), 'test.png')
formData.pipe(concat({ encoding: 'buffer' }, async data => {
  const r = await rc.post('/restapi/v1.0/account/~/extension/~/fax', data, {
    headers: formData.getHeaders()
  })
  console.log(r.data)
}))

• Вместо headers: {'Content-Type': 'multipart/form-data' } Я предпочитаю headers: formData.getHeaders()
• Мне нужно использовать concat-stream для объединения нескольких файловых потоков
• Я использую async и await выше, вы можете изменить их на простые заявления Promise, если они вам не нравятся

Ответ 5

Вышеупомянутый метод работал для меня, но так как это было то, что мне часто требовалось, я использовал базовый метод для плоских объектов. Обратите внимание, я также использовал Vue, а не REACT

packageData: (data) => {
  const form = new FormData()
  for ( const key in data ) {
    form.append(key, data[key]);
  }
  return form
}

Это работало для меня, пока я не столкнулся с более сложными структурами данных с вложенными объектами и файлами, которые затем позволяют

packageData: (obj, form, namespace) => {
  for(const property in obj) {
    // if form is passed in through recursion assign otherwise create new
    const formData = form || new FormData()
    let formKey

    if(obj.hasOwnProperty(property)) {
      if(namespace) {
        formKey = namespace + '[' + property + ']';
      } else {
        formKey = property;
      }

      // if the property is an object, but not a File, use recursion.
      if(typeof obj[property] === 'object' && !(obj[property] instanceof File)) {
        objectToFormData(obj[property], formData, property);
      } else {
        // if it a string or a File
      formData.append(formKey, obj[property]);
      }
    }
  }
  return formData;
}

Ответ 6

Еще проще:

axios.post('/addUser',{
    userName: 'Fred',
    userEmail: '[email protected]'
})
.then(function (response) {
    console.log(response);
})
.catch(function (error) {
    console.log(error);
});

Ответ 7

Вы можете попробовать это:

    axio.post('/contractor-management/contractor/firm/addNewProjectInFirm',{
        method: 'post',
        url: 'http://www.yourserver.com/upload',
        data: {
                  project_id: values.projectId,
                  id: values.selectedProjectId,
                   role: values.userRole,
               },
        headers: {
        'content-type': 'multipart/form-data; boundary=${form._boundary}',
                 },

                })
        .catch(error=> {
               console.log('error', error);
        }
     );