vue iView 上傳組件之手動上傳功能

<Upload
 multiple
 ref="upload"
 :before-upload="handleUpload"
 :show-upload-list="false"
 :on-success="uploadSuccess"
 action="http://jsonplaceholder.typicode.com/posts/">
 <Button type="ghost" icon="ios-cloud-upload-outline">瀏覽</Button>
</Upload>
<div v-for="(item, index) in file">Upload file: {{ item.name }} 
 <a href="javascript:;" rel="external nofollow" @click="delectFile(item.name)">X</a>
 <Button style="margin-left:30px;"
 size="small"
 v-if="index === 0"
![](https://user-gold-cdn.xitu.io/2018/3/14/16223a8c12c38be9?w=649&h=743&f=png&s=55740)
 type="primary"
 @click="upload"
 :loading="loadingStatus">上傳</Button>
</div>

handleUpload (file) { // 上傳文件前的事件鉤子
 // 選擇文件后 這里判斷文件類型 保存文件 自定義一個keyid 值 方便后面刪除操作
 let keyID = Math.random().toString().substr(2);
 file['keyID'] = keyID;
 // 保存文件到總展示文件數據里
 this.file.push(file);
 // 保存文件到需要上傳的文件數組里
 this.uploadFile.push(file)
 // 返回 falsa 停止自動上傳 我們需要手動上傳
 return false;
}

delectFile (keyID) { // 刪除文件
 // 刪除總展示文件里的當前文件
 this.file = this.file.filter(item => {
 return item.name != name
 })
 // 刪除需要上傳文件數據里的當前文件
 this.uploadFile = this.uploadFile.filter(item => {
 return item.KeyID != keyID
 })
}

upload () { // 上傳文件
 for (let i = 0; i < this.uploadFile.length; i++) {
 let item = this.file[i]
 this.$refs.upload.post(item);
 }
},

uploadSuccess (res, file) { // 文件上傳回調 上傳成功后刪除待上傳文件
 console.log(response)
 console.log(file)
},