Quasar 框架上传器与 axios
Posted
技术标签:
【中文标题】Quasar 框架上传器与 axios【英文标题】:Quasar Framework Uploader with axios 【发布时间】:2019-05-16 00:42:17 【问题描述】:关于 quasar 框架上传器组件的问题。 我需要将图像发布到一个 URL,该 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)
)
如果我发布带有 method="post" enctype="multipart/form-data" 和
的纯 html 表单<input type="file" name="banner">
我从服务器收到我的 OK 响应,其中包含已处理/上传的图像 URL
【问题讨论】:
使用 axios 时会出现什么错误? 这只是一个带有错误的模棱两可的 json 服务器响应我尝试使用高级 REST 应用程序并且它是相同的响应,所以我认为这毕竟可能不是 Quasar 问题。如果我发现了什么,我会进一步研究并更新。 【参考方案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));
这对我来说很好。
【讨论】:
感谢@Patel Pratik,但您应该将q-uploader
中的@add
更改为@added
是的,请将@add
更改为@added
。在阅读文档并自行修复后,我注意到 Ali Hallaji 的评论。为下一代做个好事)
我已经添加了看到的,为了更好的理解,我会把它移到上面部分以上是关于Quasar 框架上传器与 axios的主要内容,如果未能解决你的问题,请参考以下文章
「免费开源」基于Vue和Quasar的前端SPA项目crudapi后台管理系统实战之文件上传
使用axios+formdata+vue上传图片遇到后台接受不到图片的值的问题