我正在尝试使用vuejs和axios上传多张图片,但在服务器端却出现了空对象.我在标头中添加了multipart/form-data,但仍然为空对象.
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>我的服务器端代码:
class FileSettingsController extends Controller { public function upload(Request $request){ return $request->all(); } }输出:
{files: [{}]} files: [{}] 0: {}Console.log()结果: File(2838972) {name: "540340.jpg", lastModified: 1525262356769, lastModifiedDate: Wed May 02 2018 17:29:16 GMT+0530 (India Standard Time), webkitRelativePath: "", size: 2838972, …}
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, …}
推荐答案您忘记了使用$refs.将ref添加到您的输入中:
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]; console.log(file); formData.append('files[' + i + ']', file); } axios.post( '/fileupload', formData, { headers: { 'Content-Type': 'multipart/form-data' }, } ).then(function(){ }) .catch(function(){ }); },这应该可行.
更多推荐
使用vue js和axios上传多个文件
发布评论