Quasar Framework Uploader с аксиосами - PullRequest
Новая
       85

Quasar Framework Uploader с аксиосами

0 голосов
/ 14 декабря 2018

Вопрос о компоненте загрузчика инфраструктуры квазара.Мне нужно опубликовать изображения на URL, который переименует загруженный файл и вернет полный путь.

Я использую upload-factory и axios

Но у меня возникают проблемы с пониманием, как именно передать файл в axios какесли это был просто файл типа ввода.По сути, мне нужно сделать так, как если бы я отправлял форму с одним входным файлом, например так: 

<input type="file" name="banner">

Это компонент: 

<q-uploader
  url=""
  extensions=".gif,.jpg,.jpeg,.png"
  :filter="filterFiles"
  :upload-factory="uploadFile" />

Это метод загрузки, но я продолжаю получать сообщение об ошибке от сервера.

uploadFile (file, updateProgress) {
  const formData = new FormData()
  formData .set('banner', file)
  var headers = {
    'Content-Type': 'multipart/form-data'
  }
  axios.post('http://someurl/uploadFile', formData , headers)
    .then(function (response) {
      console.log(response)
    })
    .catch(function (response) {
      console.log(response)
    })
}

Если я отправлю простую HTML-форму с method = "post" enctype = "multipart / form-data" и 

<input type="file" name="banner">

, я получуМой ответ OK с сервера с URL обработанного / загруженного изображения

1 Ответ

0 голосов
/ 13 февраля 2019

Я успешно завершил загрузку файла в Python API.

Это компонент: 

<q-uploader
          url=""
          extensions=".gif,.jpg,.jpeg,.png"
          @add="file_selected"
          />

<q-btn @click="uploadFile()">Upload</q-btn>

Данные: 

data() {
  return {
    selected_file:'',
    check_if_document_upload:false
  }
}

Методы 

file_selected(file) {
        this.selected_file = file[0];
        this.check_if_document_upload=true
      },

uploadFile(){
        let fd = new FormData();
        fd.append("file", this.selected_file);

        axios.post('/uploadFile',fd,{
          headers: { 'Content-Type': undefined},
        }).then(function (response) {
          if (response.data.ok) {
          }
        }.bind(this));

      }

Это нормально работает для меня.

...