带有 axios 的 Quasar 框架上传器

Question

关于类星体框架上传器组件的问题。我需要将图像发布到一个 URL，该 URL 将重命名上传的文件并返回完整路径。

我正在使用上传工厂和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)
    })
}

如果我使用 method="post" enctype="multipart/form-data"和一个

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

我通过处理/上传的图像 URL 从服务器得到我的 OK 响应

Answer 1

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

V1 更新

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

这是组件：

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

      }

这对我来说很好用。