问题描述
一个关于quasar框架上传组件的问题.我需要将图像发布到一个 URL,该 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" 和一个
If I post a plain html form with method="post" enctype="multipart/form-data" and a
<input type="file" name="banner">
我通过处理/上传的图像 URL 从服务器获得我的 OK 响应
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.
V1 更新
使用@已添加->函数(文件) 方法.
这是组件:
<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));
}
这对我来说很好用.
这篇关于带有 axios 的 Quasar 框架上传器的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!