iView Upload 實現手動上傳

BaiLin發表於2019-03-03
View

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

功能需求點

  • 上傳選擇檔案 判斷檔案格式
  • 儲存需要上傳的檔案，展示檔名
  • 提供刪除檔案功能（未上傳前）
  • 上傳檔案

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 以後會支援一次上傳多個吧，這個手動上傳開始一直沒找到，不知道手動如何上傳呼叫事件，找功能找半天，在官方文件裡也沒有寫，官方到是有一個例子手動上傳的但：

iView Upload 實現手動上傳

並沒有事實上傳的操作 這裡也只是模擬啦 上傳方法是在原始碼裡找到的

上傳成功後

應為我們的上傳檔案功能和提交整個頁面的資料是分開的， 所以提交資料的時候需要驗證選擇檔案是否以上傳。在上傳成功事件回撥裡讓後臺把我們傳過去的資料返出來做清空待上傳檔案陣列裡的資料（注：主要是拿到檔案的keyID 做刪除），提交資料時候只需要判斷待上傳檔案陣列是否為空就可以了

檔案上傳回撥返回三個引數

  • res 上傳結果 成功與失敗 上傳之後的地址
  • file 此次上傳的檔案
  • fileList 檔案需要上傳的陣列資料
uploadSuccess (res, file,fileList) { // 檔案上傳回撥 上傳成功後刪除待上傳檔案
    console.log(response)
    console.log(file)
    console.log(fileList)  
},
複製程式碼

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

詳細程式碼地址

相關文章