使用 vue js 和 axios 上传多个文件 [英] Upload multiple file with vue js and axios
问题描述
我正在尝试使用 vuejs 和 axios 上传多个图像,但在服务器端我得到了空对象. 我在标题中添加了 multipart/form-data 但仍然是空对象.
submitFiles() {/*初始化表单数据*/让 formData = new FormData();/*遍历通过附加文件发送的任何文件到表单数据.*/for( var i = 0; i < this.files.length; i++ ){让文件 = this.files[i];控制台日志(文件);formData.append('files[' + i + ']', file);}/*`在此处输入代码`向 POST/file-drag-drop URL 发出请求*/axios.post('/文件上传',表单数据,{标题:{'内容类型':'多部分/表单数据'},}).then(函数(){}).catch(函数(){});},
HTML:
我的服务器端代码:
class FileSettingsController extends Controller{公共功能上传(请求 $request){返回 $request->all();}}
输出:
{文件:[{}]}文件:[{}]0:{}
Console.log() 结果:File(2838972) {name: "540340.jpg", lastModified: 1525262356769, lastModifiedDate: Wed May 02 2018 17:29:16 GMT+0530 (India Standard Time), webkitRelativePath:87,"}
您忘记使用 $refs
.将 ref
添加到您的输入中:
接下来,像这样访问您的文件:
submitFiles() {让 formData = new FormData();for( var i = 0; i < this.$refs.file.files.length; i++ ){让文件 = this.$refs.file.files[i];formData.append('files[' + i + ']', file);}axios.post('/fileupload', formData, {标题:{'内容类型':'多部分/表单数据'},}).then(函数(){}).catch(函数(){});},
这应该有效.
I am trying to upload multiple images using vuejs and axios but on server side i am getting empty object. I added multipart/form-data in header but still empty object.
submitFiles() {
/*
Initialize the form data
*/
let formData = new FormData();
/*
Iteate over any file sent over appending the files
to the form data.
*/
for( var i = 0; i < this.files.length; i++ ){
let file = this.files[i];
console.log(file);
formData.append('files[' + i + ']', file);
}
/*`enter code here`
Make the request to the POST /file-drag-drop URL
*/
axios.post( '/fileupload',
formData,
{
headers: {
'Content-Type': 'multipart/form-data'
},
}
).then(function(){
})
.catch(function(){
});
},
HTML:
<form method="post" action="#" id="" enctype="multipart/form-data">
<div class="form-group files text-center" ref="fileform">
<input type="file" multiple="multiple">
<span id='val'></span>
<a class="btn" @click="submitFiles()" id='button'>Upload Photo</a>
<h6>DRAG & DROP FILE HERE</h6>
</div>
My Server side code:
class FileSettingsController extends Controller
{
public function upload(Request $request){
return $request->all();
}
}
Output:
{files: [{}]}
files: [{}]
0: {}
Console.log() result:
File(2838972) {name: "540340.jpg", lastModified: 1525262356769, lastModifiedDate: Wed May 02 2018 17:29:16 GMT+0530 (India Standard Time), webkitRelativePath: "", size: 2838972, …}
You forgot to use $refs
. Add ref
to your input:
<input type="file" ref="file" multiple="multiple">
Next, access your files like this:
submitFiles() {
let formData = new FormData();
for( var i = 0; i < this.$refs.file.files.length; i++ ){
let file = this.$refs.file.files[i];
formData.append('files[' + i + ']', file);
}
axios.post('/fileupload', formData, {
headers: {
'Content-Type': 'multipart/form-data'
},
}
).then(function(){
})
.catch(function(){
});
},
This should be works.
这篇关于使用 vue js 和 axios 上传多个文件的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!