Используя необработанный HTML, когда я отправляю файл на сервер фляги, используя следующее, я могу получить доступ к файлам из глобального запроса фляги:
<form id="uploadForm" action='upload_file' role="form" method="post" enctype=multipart/form-data>
<input type="file" id="file" name="file">
<input type=submit value=Upload>
</form>
В колбе:
def post(self):
if 'file' in request.files:
....
Когда я пытаюсь сделать то же самое с Axios, глобальный запрос колбы пуст:
<form id="uploadForm" enctype="multipart/form-data" v-on:change="uploadFile">
<input type="file" id="file" name="file">
</form>
uploadFile: function (event) {
const file = event.target.files[0]
axios.post('upload_file', file, {
headers: {
'Content-Type': 'multipart/form-data'
}
})
}
Если я использую ту же функцию uploadFile, что и выше, но удаляю заголовки json из метода axios.post, я получаю в виде ключа моего объекта запроса фляги список строковых значений csv (файл -.csv).
Как я могу получить объект файла, отправленный через axios?
Добавьте файл в объект formData и установите для заголовка Content-Type значение multipart/form-data.
var formData = new FormData();
var imagefile = document.querySelector('#file');
formData.append("image", imagefile.files[0]);
axios.post('upload_file', formData, {
headers: {
'Content-Type': 'multipart/form-data'
}
})
Пример приложения с использованием Vue. Для обработки запроса требуется внутренний сервер, работающий на localhost:
var app = new Vue({
el: "#app",
data: {
file: ''
},
methods: {
submitFile() {
let formData = new FormData();
formData.append('file', this.file);
console.log('>> formData >> ', formData);
// You should have a server side REST API
axios.post('http://localhost:8080/restapi/fileupload',
formData, {
headers: {
'Content-Type': 'multipart/form-data'
}
}
).then(function () {
console.log('SUCCESS!!');
})
.catch(function () {
console.log('FAILURE!!');
});
},
handleFileUpload() {
this.file = this.$refs.file.files[0];
console.log('>>>> 1st element in files array >>>> ', this.file);
}
}
});