1. 程式人生 > >關於vue 中 使用 webuploader 遇到的坑及解決方案,本文以分片上傳為例解說,上傳壓縮包大小為2G左右在專案中實測

關於vue 中 使用 webuploader 遇到的坑及解決方案,本文以分片上傳為例解說,上傳壓縮包大小為2G左右在專案中實測

首先說一下vue中使用webuploader該如何引入呼叫

  1. 肯定是安裝操作, 本人用的是淘寶映象 cnpm i webuploader -S  如果你沒有安裝淘寶映象,則使用 npm i webuploader -S

  2. 引入操作,在具體的vue元件中引入 , import Webuploader from 'webuploader', 這時候需要引入你寫的css樣式來覆蓋webuploader的預設css樣式。需要單獨寫一個css檔案然後import引入進來,例如:

      import Webuploader from 'webuploader'

      import ‘@/src/style/webuploader.css’

  3. webuploader中 option的配置

       let option = {

        auto: false,  // 是否開啟自動上傳,預設為false,設定為true,選擇檔案之後,無需操作自動上傳

        swf: ‘./Uploader.swf’, // 指定絕對路徑

        server: '/api/upgrade', // 上傳後臺服務地址,

        pick: {

          id: '.webuploader', // 指定容器,id中可以是class ,id , dom

          label: innerHTML形式,

          multiple: false // 單檔案上傳 ,設定為true則開啟多檔案上傳。

        },

        accept: {

          title: "壓縮包",

          extensions: 'zip, ZIP',

          mimeTypes: 'application/zip'

        },

        chunked: true, //開啟分片上傳

             chunkSize: 10 * 1024 * 1024,  // 分片大小

        threads: 10, // 執行緒數

        methods: 'POST',

        duplicate: false, // 是否允許上傳多個檔案

        fileNumLimit: 1, // 限制檔案上傳個數

        fileSingleSizeLimit:  1500 * 1024 * 1024, // 限制單個檔案上傳的大小

        formData: {

          guid: webuploader.Base.guid() // 給後端的資料

        }

      }

  4. 初始化例項, 此處例項化例項寫在方法中。

    export default {

      data () {

        return {

          webupload: null

        }

      }

    }

    initData () {

      this.webupload = webuploader.create(options) // 例項webuploader

      // 接下來就是webuploder的一系列方法

      this.webuplode.on('beforeFileQueued', file => {

        // 檔案加入佇列之前的一系列操作

      })

      // fileQueued => 檔案加入佇列時的操作,

       uploadStart => 開始上傳之前的操作

       uploadSuccess => 上傳成功的操作

       uploadError => 上傳失敗的操作

       uploadProgress => 上傳時的進度,檔案上傳過程中建立實時顯示的進度條

       uploadComplete => 上傳之後的操作,不管成功失敗都會執行

       uploadFinished => 所有檔案上傳結束後的操作

       reset => 重置webuploder例項

       upload => 開始上傳 this.webupload.upload()

    }

   下篇部落格寫上程式碼