Используя необработанный HTML, когда я отправляю файл на сервер фляги, используя следующее, я могу получить доступ к файлам из глобального запроса фляги:

В колбе:

def post(self):
    if 'file' in request.files:
        ....

Когда я пытаюсь сделать то же самое с Axios, глобальный запрос фляги пуст:

uploadFile: function (event) { const file = event.target.files[0] axios.post('upload_file', file, { headers: { 'Content-Type': 'multipart/form-data' } }) }

Если я использую ту же функцию uploadFile выше, но удаляю json-заголовки из метода axios.post, я получаю в ключе формы моего объекта запроса фляги список строковых значений csv (файл .csv).

Как я могу получить объект файла, отправленный через axios?

Ответы (6)

Добавьте файл в объект formData и установите для заголовка Content-Type значение multipart / form-data.

var formData = new FormData();
var imagefile = document.querySelector('#file');
formData.append("image", imagefile.files[0]);
axios.post('upload_file', formData, {
    headers: {
      'Content-Type': 'multipart/form-data'
    }
})

Если вы не хотите использовать объект FormData (например, ваш API принимает определенные сигнатуры типа содержимого, а multipart / formdata не входит в их число), вы можете вместо этого сделайте это:

uploadFile: function (event) {
    const file = event.target.files[0]
    axios.post('upload_file', file, {
        headers: {
          'Content-Type': file.type
        }
    })
}

У меня работает, надеюсь кому-то поможет.

var frm = $('#frm');
let formData = new FormData(frm[0]);
axios.post('your-url', formData)
    .then(res => {
        console.log({res});
    }).catch(err => {
        console.error({err});
    });

Делюсь своим опытом работы с React и вводом HTML

Определить поле ввода


Определить слушателя onChange

const onChange = (e) => {
  let url = "https:///api/upload";
  let file = e.target.files[0];
  uploadFile(url, file);
};

const uploadFile = (url, file) => {
  let formData = new FormData();
  formData.append("file", file);
  axios.post(url, formData, {
      headers: {
        "Content-Type": "multipart/form-data",
      },
    }).then((response) => {
      fnSuccess(response);
    }).catch((error) => {
      fnFail(error);
    });
};
const fnSuccess = (response) => {
  //Add success handling
};

const fnFail = (error) => {
  //Add failed handling
};

Как отправить файл, используя объект в памяти (например, объект JSON):

import axios from 'axios';
import * as FormData  from 'form-data'

async function sendData(jsonData){
    // const payload = JSON.stringify({ hello: 'world'});
    const payload = JSON.stringify(jsonData);
    const bufferObject = Buffer.from(payload, 'utf-8');
    const file = new FormData();

    file.append('upload_file', bufferObject, "b.json");

    const response = await axios.post(
        lovelyURL,
        file,
        headers: file.getHeaders()
    ).toPromise();


    console.log(response?.data);
}

Пример приложения с использованием Vue. Для обработки запроса требуется внутренний сервер, работающий на локальном хосте:

var app = new Vue({
  el: "#app",
  data: {
    file: ''
  },
  methods: {
    submitFile() {
      let formData = new FormData();
      formData.append('file', this.file);
      console.log('>> formData >> ', formData);

      // You should have a server side REST API 
      axios.post('http://localhost:8080/restapi/fileupload',
          formData, {
            headers: {
              'Content-Type': 'multipart/form-data'
            }
          }
        ).then(function () {
          console.log('SUCCESS!!');
        })
        .catch(function () {
          console.log('FAILURE!!');
        });
    },
    handleFileUpload() {
      this.file = this.$refs.file.files[0];
      console.log('>>>> 1st element in files array >>>> ', this.file);
    }
  }
});

https://codepen.io/pmarimuthu/pen/MqqaOE

2022 WebDevInsider