iView Upload 實現手動上傳

最近作一個後臺系統用的功能 總結下碰見的問題

功能需求點

• 上傳選擇文件 判斷文件格式
• 保存須要上傳的文件，展現文件名
• 提供刪除文件功能（未上傳前）
• 上傳文件

iView 提供的上傳組件

<Upload
    multiple
    ref="upload"
    :before-upload="handleUpload"
    :show-upload-list="false"
    :on-success="uploadSuccess"
    action="//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:;"  @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>
複製代碼

用到的API參數 / 方法

• multiple ： 是否支持多選文件 默認 false
• before-upload：上傳文件這前的事件鉤子，若返回 false 或者 Promise 則中止自動上傳
• show-upload-list： 是否顯示已上傳文件列表 默認爲true
• on-success: 上傳文件成功後的事件鉤子，返回 res(接口方返回的信息), file(上傳文件), fileList(上傳文件List)
• action： 文件上傳地址

上傳選擇文件 判斷文件格式 保存文件

選擇文件後會調用方法，在裏面作的事情有 判斷文件類型是否知足需求，若是知足就保存到須要上傳的文件List裏，這裏咱們須要本身定義一個keyID,應爲是手動上傳須要展現，刪除功能，若是沒有惟一ID不知道刪除那個

這裏若是容許多文件上傳也不用但心什麼，此鉤子會把選擇的文件當數組同樣調用上傳件事件前的鉤子事件 handleUpload ，因此也不用但心多文件選擇只會生成一個KeyID

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);
    }
},
複製代碼

這裏若是是多文件的時候須要循環上傳一個一個來，若是一次上傳多個組件會報錯，只支持一次上傳一個文件，但願iView 之後會支持一次上傳多個吧，這個手動上傳開始一直沒找到，不知道手動如何上傳調用事件，找功能找半天，在官方文檔裏也沒有寫，官方到是有一個例子手動上傳的但：

並無事實上傳的操做 這裏也只是模擬啦 上傳方法是在源碼裏找到的

上傳成功後

應爲咱們的上傳文件功能和提交整個頁面的數據是分開的， 因此提交數據的時候須要驗證選擇文件是否以上傳。在上傳成功事件回調裏讓後臺把咱們傳過去的數據返出來作清空待上傳文件數組裏的數據（注：主要是拿到文件的keyID 作刪除），提交數據時候只須要判斷待上傳文件數組是否爲空就能夠了

文件上傳回調返回三個參數

• res 上傳結果 成功與失敗 上傳以後的地址
• file 這次上傳的文件
• fileList 文件須要上傳的數組數據

uploadSuccess (res, file,fileList) { // 文件上傳回調 上傳成功後刪除待上傳文件
    console.log(response)
    console.log(file)
    console.log(fileList)  
},
複製代碼

這裏有個小問題，應爲上傳的時候是循環調用上傳的，若是多個文件上傳這裏會有多個回調結果不能成功一個文件提示用戶一次，因此須要處理一下，這裏自定義一個數每次回調回來做自增處理，當值與上待上傳文件的length 相等時才提示上傳結果

詳細代碼地址