Quasar 框架上传器与 axios

Posted

技术标签:

【中文标题】Quasar 框架上传器与 axios【英文标题】:Quasar Framework Uploader with axios 【发布时间】:2019-05-16 00:42:17 【问题描述】:

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

我正在使用 upload-factoryaxios

但我无法准确理解如何将文件传递给 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"

的纯 html 表单
<input type="file" name="banner">

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

【问题讨论】:

使用 axios 时会出现什么错误? 这只是一个带有错误的模棱两可的 json 服务器响应我尝试使用高级 REST 应用程序并且它是相同的响应,所以我认为这毕竟可能不是 Quasar 问题。如果我发现了什么,我会进一步研究并更新。 【参考方案1】:

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


V1 更新

使用@added -&gt; 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));

这对我来说很好。

【讨论】:

感谢@Patel Pratik,但您应该将q-uploader 中的@add 更改为@added 是的,请将@add 更改为@added。在阅读文档并自行修复后,我注意到 Ali Hallaji 的评论。为下一代做个好事) 我已经添加了看到的,为了更好的理解,我会把它移到上面部分

以上是关于Quasar 框架上传器与 axios的主要内容,如果未能解决你的问题,请参考以下文章

「免费开源」基于Vue和Quasar的前端SPA项目crudapi后台管理系统实战之文件上传

axios+FormData文件上传

使用axios+formdata+vue上传图片遇到后台接受不到图片的值的问题

vue框架实现文件上传功能

Node.js与Express联合中间件express-fileupload使用axios实现文件上传

如何修复 Axios 中的图片上传问题