Как опубликовать файл из формы с помощью Axios

130

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

<form id="uploadForm" action='upload_file' role="form" method="post" enctype=multipart/form-data>
    <input type="file" id="file" name="file">
    <input type=submit value=Upload>
</form>

В колбе:

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

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

<form id="uploadForm" enctype="multipart/form-data" v-on:change="uploadFile">
<input type="file" id="file" name="file">
</form>

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?

Дон Смайт
источник
@Niklesh да вырезка и вставка опечатки, я исправил выше, включает двойные кавычки в коде.
Дон Смайт
Вы пытались v-on:change="uploadFile"с inputвместо formтега?
Никлеш Раут
@Niklesh Я получаю тот же результат - данные отправляются в виде строки и принимаются request.form, а не request.files в колбе.
Дон Смайт

Ответы:

273

Добавьте файл к 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'
    }
})
Никлеш Раут
источник
1
После размещения файлов. Нужно ли нам получить к ним доступ из HTTP-запроса или нужно получить к ним доступ из параметров на стороне сервера.
Парт Патель
@ParthPatel: Я использую $_FILESдля получения файлов на стороне сервера, так как использую PHP
Никлеш Раут
7
Спасибо за этот пост, но я до сих пор не понимаю, зачем нам это нужно FormData. Согласно документу axios, оба Fileи FormDataобрабатываются только как браузер , поэтому оба пути можно рассматривать одинаково ( github.com/axios/axios#request-config )
Хироки
Потрясающие ! Я отправлял "data: {data: formData}", который генерировал ошибку 412. Он работал сdata:formData
Aseem
3
ВНИМАНИЕ: фрагмент работает как есть при запуске в контексте браузера. Для запуска в node.js необходимо передать заголовки, вычисленные с помощью. formData.getHeaders()Это известная проблема с axios; см. напримерhttps://github.com/axios/axios/issues/789
mjv
13

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

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

тапз
источник
Могу я попросить вас взглянуть на вопрос, связанный с аксиомами, здесь: stackoverflow.com/questions/59470085/… ?
Istiaque Ahmed
5

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

var frm = $('#frm');
let formData = new FormData(frm[0]);
axios.post('your-url', formData)
    .then(res => {
        console.log({res});
    }).catch(err => {
        console.error({err});
    });
OCornejo
источник
используя Nuxt - это, наконец, сработало для меня. удаление headers: { 'Content-Type': 'multipart/form-data' }было единственным способом отправить сообщение после получения ответа сервера от options. Я, наверное, что-то делаю не так, но это работает, и я оставляю это в покое, лол
Джефф Блюмел
Это великолепно! Никогда бы не подумал, что вы можете отправить всю форму. Спасибо!
Дара Ява,