带有axios的Quasar Framework Uploader [英] Quasar Framework Uploader with axios

问题描述

有关类星体框架上载器组件的问题. 我需要将图像发布到将重命名上载文件并返回完整路径的URL.

A question about the quasar framework uploader component. I need to post the images to a URL that will rename the uploaded file and return the full path.

我正在使用 upload-factory 和 axios

但是我在准确地了解如何将文件传递到axios时遇到问题，就好像它只是一个输入类型文件一样. 基本上，我需要像发送带有单个输入文件的表单一样，使它像这样:

But I'm having problems understanding exactly how to pass the file to axios as if it was just an input type file. Basically I need to make it as If I'm sending a form with a single input file like this:

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

这是组件:

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

这是上载方法，但是我不断收到服务器的错误响应.

This is the upload method, but I keep getting an error response from the server.

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

如果我发布带有 method ="post" enctype ="multipart/form-data" 和

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

我从服务器收到我的OK响应，其中包含已处理/已上传的图片URL

I get my OK response from the server with the processed/uploaded image URL

推荐答案

我已成功将文件上传到python API.

I have successfully done uploading of the file to 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));

      }

这对我来说很好.

V1更新

V1 Update

使用@added -> function(files)方法.

这篇关于带有axios的Quasar Framework Uploader的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！