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不知道删除那個

這裡如果允許檔案上傳了不用但心什麼，此鈎子會把選擇的當數組一樣需要調用上檔案事件前的鈎子事件，是以也不能但心多檔案選擇隻會生成一個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 以後會支援一次上傳多個吧，這個上傳我開始一直找不到，不知道手動上傳停止自己上傳後怎麼手動傳，找功能找半天，在官方文檔裡也沒有寫，官方到是有一個例子手動上傳的但：

并沒有事實上傳的操作 這裡也隻是模拟啦 上傳方法是在源碼裡找到的

上傳成功後

應該我們的上傳檔案功能和送出整個頁面的資料是分開的 是以送出資料的時候需要驗證選擇檔案是否以上傳在上傳成功事件裡讓後右把我們傳過去的資料返出來做清空待上傳檔案數組裡的資料，送出資料時候隻需要判斷待上傳檔案數組是否為空就可以了

檔案上傳回調傳回三個參數

• res 上傳結果 成功與失敗 上傳之後的位址
• file 此次上傳的檔案

uploadSuccess (res, file) { // 檔案上傳回調 上傳成功後删除待上傳檔案
    console.log(response)
    console.log(file)
},
           

這裡有個小問題 應該上傳的時候是循環調用上傳的，如果多個檔案上傳這裡會有多個回調結果不能成功一個檔案提示使用者一次，是以需要處理一下，這裡自定義一個數每次回調回來作自增處理，當值與上待上傳檔案的length 相等時才提示上傳結果

完整代碼GitHub位址 https://github.com/bailin240/ArticleCode/tree/master/view/iViewUpload

更多專業前端知識，請上 【猿2048】www.mk2048.com