国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

在Vue項目中使用WebUploader實現文件上傳

mindwind / 1703人閱讀

摘要:簡介是由團隊開發的一個簡單的以為主,為輔的現代文件上傳組件。采用大文件分片并發上傳,極大的提高了文件上傳效率。另外分片傳輸能夠更加實時的跟蹤上傳進度。選擇文件的按鈕。

簡介:
WebUploader是由Baidu WebFE(FEX)團隊開發的一個簡單的以HTML5為主FLASH為輔的現代文件上傳組件。在現代的瀏覽器里面能充分發揮HTML5的優勢,同時又不摒棄主流IE瀏覽器,沿用原來的FLASH運行時,兼容IE6+,iOS 6+, android 4+。兩套運行時,同樣的調用方式,可供用戶任意選用。采用大文件分片并發上傳,極大的提高了文件上傳效率。
分片、并發

分片并發結合,將一個大文件分割成多塊,并發上傳,極大地提高大文件的上傳速度。
網絡問題導致傳輸錯誤時,只需要重傳出錯分片,而不是整個文件。另外分片傳輸能夠更加實時的跟蹤上傳進度。

預覽、壓縮

支持常用圖片格式jpg,jpeg,gif,bmp,png預覽與壓縮,節省網絡數據傳輸。
解析jpeg中的meta信息,對于各種orientation做了正確的處理,同時壓縮后上傳保留圖片的所有原始meta數據

多途徑添加文件

支持文件多選類型過濾拖拽(文件&文件夾),圖片粘貼功能
粘貼功能主要體現在當有圖片數據在剪切板中時(截屏工具如QQ(Ctrl + ALT + A), 網頁中右擊圖片點擊復制),Ctrl + V便可添加此圖片文件。

HTML5 & FLASH

兼容主流瀏覽器,接口一致,實現了兩套運行時支持,用戶無需關心內部用了什么內核。
同時Flash部分沒有做任何UI相關的工作,方便不關心flash的用戶擴展和自定義業務需求

MD5秒傳

當文件體積大、量比較多時,支持上傳前做文件md5值驗證,一致則可直接跳過。
如果服務端與前端統一修改算法,取段md5,可大大提升驗證性能,耗時在20ms左右

下載webuploader

下載并解壓后,文件目錄結構如下
Uploader.swf  
//樣式文件                  
webuploader.css
//定制版               
webuploader.custom.js            
webuploader.custom.min.js
        
webuploader.fis.js

//只有Flash實現的版本
webuploader.flashonly.js
webuploader.flashonly.min.js
//只有HTML5實現的版本
webuploader.html5only.js            
webuploader.html5only.min.js        
//完整版
webuploader.js                   
webuploader.min.js 
//沒有圖像處理的版本。               
webuploader.noimage.js
webuploader.noimage.min.js
//不帶文件日志功能的版本(默認完整版帶日志功能)
webuploader.nolog.js
webuploader.nolog.min.js
//去除圖片處理的版本,包括HTML5和FLASH.
webuploader.withoutimage.js
webuploader.withoutimage.min.js
注意:這里的css文件很少,只是那個上傳文件按鈕的樣式,其他的樣式需要自己書寫,也可以直接追加在當前vue組件的樣式里面
引入webuploader
使用Web Uploader文件上傳需要引入三種資源:JS, CSS, SWF。
方法1:直接引入文件

這里我們使用完全壓縮版的webuploader.min.js,同時還要引入Uploader.swf webuploader.css,所以可以刪除其他版本的文件,只留這三個文件,將解壓的webuploader文件夾直接放在static文件夾下.

index.html中引入webuploader.min.js

重啟項目后報錯了,說缺少依賴jquery,打開源碼webuploader.js看一下

原來webuploader是依賴于juqery或者Zepto的,那我們引入jquery,我們去jquery官網下載jquery,并在index.html中引入,注意,一定要在webuploader.min.js之前引入,在這里我下載的是1.12.4版本
方法2:模塊化引入
下載webuploder
npm install webuploader --save
下載jquery
npm install jquery@1.12.4
App.vue中引入webuploderjquery
import $ from "jquery"
import WebUploader from "webuploader"
寫一個Demo HTML部分
App.vue


JS部分,初始化webuploader
Vuemounted周期內實例化webuploader并進行配置
App.vue

mounted:function(){
        var uploader = WebUploader.create({
        // swf文件路徑
        swf:"../static/webuploader-0.1.5/Uploader.swf",
        // 文件接收服務端。
        server: "http://webuploader.duapp.com/server/fileupload.php",
        // 選擇文件的按鈕。可選。
        // 內部根據當前運行是創建,可能是input元素,也可能是flash.
        pick: "#picker",
        // 不壓縮image, 默認如果是jpeg,文件上傳前會壓縮一把再上傳!
        resize: false,
        //是否開啟自動上傳
        auto:false
    });
  }
文件加入隊列前
可以在該事件回調函數中對文件類型進行篩選,或者根據文件大小決定是否開啟分片上傳

uploader.on( "beforeFileQueued", function( file) {
   console.log("文件加入隊前",file)
});
文件加入隊列后

 // 當有文件被添加進隊列的時候
      uploader.on( "fileQueued", function( file ) {
        console.log("文件加入隊列后")
          var $list = $("#fileList")
          $list.append( "
" + "

" + file.name + "

" + "

等待上傳...

" + "
" ); });

點擊選擇文件按鈕后,選擇一個文件,就會如上圖所示,出現文件列表,從代碼可以看出,他是在選擇文件之后,動態添加的的dom,顯示文件名稱以及狀態,關于文件的詳細信息,則可以從fileQueued事件的回調函數的參數file獲取,我們打印一下file

ext------------------------------文件后綴
id-------------------------------文件ID
lastModifiedDate-----------------文件最后修改時間
name-----------------------------文件名稱
size-----------------------------文件大小(這里是以字節為單位,1字節=1KB,1M=1024KB,1m=1024*1024字節)
source---------------------------包含一些文件信息和方法,例如唯一標識的`ruid`、`uid`、`_hash`
文件上傳中
主要利用了webuploaderuploadProgress事件,該事件會在文件上傳過程中觸發,可以利用該事件創建進度條

// 文件上傳過程中創建進度條實時顯示。
      uploader.on( "uploadProgress", function( file, percentage ) {
        console.log("文件上傳中",file,percentage)
          var $li = $( "#"+file.id ),
              $percent = $li.find(".progress .progress-bar");
          // 避免重復創建
          if ( !$percent.length ) {
              $percent = $("
" + "
" + "
" + "
").appendTo( $li ).find(".progress-bar"); } $li.find("p.state").text("上傳中"); $percent.css( "width", percentage * 100 + "%" ); //根據上傳進度改變進度條寬度 });

uploadProgress事件的回調函數的參數`file是文件的一些信息,percentage則是文件上傳進度,1為上傳完畢,從上面代碼可以看到,在文件開始上傳后,會在fileQueued事件中動態創建的id=fileList元素中動態創建一個進度條容器,并根據上傳進度動態改變進度條的寬度,這樣就有了進度條的效果,需要注意的是,以上事件中動態生成的dom元素,例如文件列表、進度條的樣式都需要我們自己去寫,webuploader.css中并沒有,這一點官網沒提醒,我第一次使用時,也被坑了
文件上傳成功
可以在該事件回調函數中移除進度條、更改進度條狀態等操作
 uploader.on( "uploadSuccess", function( file,response ) {
    console.log("文件上傳成功",file,response)
      $( "#"+file.id ).find("p.state").text("已上傳");
  });
文件上傳失敗
可以在該事件回調函數中更改提示文本,改變進度條樣式,刪除上傳失敗的文件等操作

uploader.on( "uploadError", function( file,reason ) {
console.log("文件上傳失敗",file,reason)
$( "#"+file.id ).find("p.state").text("上傳出錯");
});

文件上傳完成
可以在該事件回調函數中更改提示文本,改變進度條樣式等操作

uploader.on( "uploadComplete", function( file ) {

console.log("文件上傳完成")
  $( "#"+file.id ).find(".progress").fadeOut();

});

文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。

轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/54226.html

相關文章

  • Vue項目使用WebUploader實現文件上傳

    摘要:簡介是由團隊開發的一個簡單的以為主,為輔的現代文件上傳組件。采用大文件分片并發上傳,極大的提高了文件上傳效率。另外分片傳輸能夠更加實時的跟蹤上傳進度。選擇文件的按鈕。 簡介:WebUploader是由Baidu WebFE(FEX)團隊開發的一個簡單的以HTML5為主,FLASH為輔的現代文件上傳組件。在現代的瀏覽器里面能充分發揮HTML5的優勢,同時又不摒棄主流IE瀏覽器,沿用原來的...

    endiat 評論0 收藏0
  • Vue項目使用WebUploader實現文件上傳

    摘要:簡介是由團隊開發的一個簡單的以為主,為輔的現代文件上傳組件。采用大文件分片并發上傳,極大的提高了文件上傳效率。另外分片傳輸能夠更加實時的跟蹤上傳進度。選擇文件的按鈕。 簡介:WebUploader是由Baidu WebFE(FEX)團隊開發的一個簡單的以HTML5為主,FLASH為輔的現代文件上傳組件。在現代的瀏覽器里面能充分發揮HTML5的優勢,同時又不摒棄主流IE瀏覽器,沿用原來的...

    funnyZhang 評論0 收藏0
  • webuploader與網宿云踩坑

    摘要:上傳結構與網宿云要求上傳結構的不同上圖是翻自網宿云的文檔的分片上傳流程。鑒于網宿云的上傳一片一塊在邏輯上沒毛病,我們同樣能一塊一塊完成上傳這里注意請仔細看網宿云或七牛云分片上傳的文檔,了解如何分片上傳。 webuploader踩坑 webuploader是百度fex團隊開發的一個十分便捷的上傳插件,但是我們在實際生產中,會發現使用它與我們的需求有各種各樣的出入。最近做上傳功能,踩了不少...

    Yi_Zhi_Yu 評論0 收藏0
  • 文件上傳的幾種方法——webuploader

    摘要:本來想把這幾種方法放在同一篇寫的,寫完,已經很長了,想想還是分開的比較好。是由團隊開發的一個簡單的以為主為輔的現代文件上傳組件。因為是,就拿著的來用一下選擇文件的按鈕。也可以重寫上傳事件。如果不自動上傳的話,可以通過觸發。 本來想把這幾種方法放在同一篇寫的,寫完xhr,已經很長了,想想還是分開的比較好。webuploader是由Baidu WebFE(FEX)團隊開發的一個簡單的以HT...

    Amos 評論0 收藏0
  • summernote(富文本編輯器)將附件與圖片上傳到自己的服務器(vue項目

    摘要:將創建好的對象,再插入到編輯器中注意這里不用方法因為他會額外的標簽具體查看,另外當選取本地文件的時候,此時的富文本編輯器會失去焦點,插入新的節點的時候,總是從起始點開始插入,而非從當前光標的位置進行插入。 1.上傳圖片至自己的服務器(這個官方都有例子,重點介紹附件上傳)圖片上傳官方網址 // onChange callback $(#summernote).summernote({ ...

    wqj97 評論0 收藏0

發表評論

0條評論

mindwind

|高級講師

TA的文章

閱讀更多
最新活動
閱讀需要支付1元查看
<