laravel-5 - Vue自定义输入文件组件无法正确提交
问题描述
我有一个用于浏览文件的组件,我用它来选择要上传的文件。这是我的组件:
<template>
<label class="file-select">
<div class="select-button">
<span v-if="value">Selected File: {{value.name}}</span>
<span v-else>Select File</span>
</div>
<input type="file" @change="handleFileChange"/>
</label>
</template>
<script>
export default {
props: {
value: File
},
methods: {
handleFileChange(e) {
this.$emit('input', e.target.files[0])
}
}
}
</script>
这是我使用组件的方式:
<p>Select Image: <bim-fileinput v-model="file"></bim-fileinput></p>
这是我使用 axios 提交文件的方式:
submit: function(){
console.log(localStorage.getItem('token'));
axios.post('/api/employees', {
picture: this.file,
}, { headers: { Authorization: 'Bearer '.concat(localStorage.getItem('token')) }, 'Content-Type': 'multipart/form-data' })
.then(response => {
router.push({ name: "IndexEmployees"});
}).catch(error => {
console.log(error.message);
});
}
提交后,在控制器中我得到图片属性,但作为一个空数组。所以我尝试使用控制台打印它。console.log('文件'+ JSON.stringfy(this.file))
我将 File {} 作为一个空对象。
所以我需要弄清楚我的代码中的问题在哪里,或者如何正确地解决它。
提前致谢。
解决方案
this.file
是File的实例,它总是像{}
json 编码时一样。
axios中的问题,必须使用FormData
发送文件。
const formData = new FormData();
formData.append('picture', this.file);
axios.post('/api/employees', formData, {
headers: {
'Content-Type': 'multipart/form-data',
// ...
}
}) // ...
推荐阅读
- asp.net - 调用控制器后,MVC 视图不显示 Temp Data 值
- java - java/android - 无法访问 SD 卡上的文件
- arrays - 数组codeIgniter中的多个数据?
- git - 如何合并推送存储库中的三个旧提交?
- node.js - 每次我在 NodeJs 中重新加载页面时创建一个文件夹
- git - 本地分支和远程跟踪分支之间的 git diff
- android - 安卓 | 无法构建多风味维度
- jquery - 无法读取 iframe 元素上替换“未定义”的属性
- laravel - php artisan storage:链接链接错误的目录
- java - Android比较字符串与数组并删除数组索引值