带有 axios 的 Quasar 框架上传器

Question

关于类星体框架上传器组件的问题。我需要 post 将图像 URL 重命名上传的文件并 return 完整路径。

我正在使用 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)
    })
}

如果我 post 一个普通的 html 表单，带有 method="post" enctype="multipart/form-data" 和

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

我从服务器收到带有 processed/uploaded 图片的 OK 响应 URL

Answer 1

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

V1更新

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

另外 extensions 属性已删除，现在使用 accept

这是组件：

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

这对我来说很好。

Answer 2

我已经通过单击按钮成功地直接上传了文件 python API。但是在 vue3 和 Quasar 2 中有一些额外的 formData。想法可能会有帮助

这是组件：

<q-btn
   label="Upload"
   @click="openFilePicker"
/>
<q-uploader
   ref="uploadFile"
   class="hidden"
   accept=".jpg, .jpeg, .png"
   @added="uploadFileFn"
/>

设置：

setup() {
    return {
      uploadFile: ref(null),
    }
  },

方法：

openFilePicker() {
   this.$refs.uploadFile.pickFiles();
},
uploadFileFn(file) {
   this.uploadFile = file[0];
   let fd = new FormData();
   fd.append("file", this.uploadFile);
   fd.append("id", "1");
   fd.append("name", "test_user");

   this.$axios.post('/upload_file_with_additional_form_data', fd, {
      headers: {'Content-Type': undefined},
   }).then(
   function (response) {
      if (response.data.success) {
          console.log(response)
      }
   }.bind(this))
}

这对我来说很好用。

带有 axios 的 Quasar 框架上传器

Quasar Framework Uploader with axios

uploader

vue.js

axios

quasar-framework