首先摄闸，表單代碼
<form class="upload-form" v-show="show_upload_page" method="post" enctype="multipart/form-data">
<div >
<input class="select-file" type="file" name="files" @change="bindFiles($event)" multiple/>
</div>
<div>
<input class="category-txt" type="text" name="category" v-model="upload_category" placeholder="請(qǐng)輸入類別" />
</div>
<div>
<input class="submit-btn" type="button" value="上傳" v-on:click.prevent="upload()"/>
</div>
</form>
javascript:
<script>
new Vue({
el: '#app',
data:{
upload_files:[],
upload_category:''
},
methods:{
bindFiles(event){
//獲取文件
let files = event.target.files;
//將文件push到upload_files
for(let i = 0; i < files.length;i++){
this.upload_files.push(files[i]);
}
},
upload(){
let formData = new FormData();
for (let i = 0;i < this.upload_files.length;i++){
formData.append('files',this.upload_files[i]);
}
formData.append('category',this.upload_category);
this.$http.post(this.host + '/file',
formData,
{
headers: {
'Content-Type': 'multipart/form-data'
}
}).then(function (){
alert("文件上傳成功");
} , function () {
alert("文件上傳失敗");
})
}
}
});
</script>
錯(cuò)誤記錄：
- 起初礁扮，我期望通過(guò)
v-model對(duì)file控件和upload_files變量進(jìn)行雙向綁定。但是，發(fā)現(xiàn)files無(wú)法綁定到upload_files中掌腰。
經(jīng)過(guò)資料搜索冒窍，需要使用change事件來(lái)操作。(具體原因還沒清楚，此處只做一個(gè)記錄榛泛，待深入學(xué)習(xí)再做討論) - 通過(guò)
let files = event.target.files;拿到files后，起初我通過(guò)for ...in的方式遍歷files噩斟，出錯(cuò)曹锨。
對(duì)對(duì)象屬性進(jìn)行了遍歷，js沒系統(tǒng)學(xué)剃允。 - 起初沛简，構(gòu)建formData時(shí)，直接
formData.append('files',this.upload_files);斥废，出錯(cuò)椒楣。
通過(guò)遍歷this.upload_files，將每個(gè)file添加到表單中牡肉，即使key一樣捧灰，也不會(huì)重置。
