對于大文件，往往需要通過斷點續(xù)傳來應(yīng)對不穩(wěn)定的網(wǎng)絡(luò)環(huán)境。這幾天正好做畢設(shè)，記下來斷點續(xù)傳的一些想法

H5斷點續(xù)傳

• 思路
  斷點續(xù)傳的第一步是對文件進行分片。分片之后上傳每一個slice。
  這其中重要的是讓服務(wù)器認識到這是同一個文件的slice，我是每一次在上傳之前先post生成的token和文件名，然后服務(wù)器端收到這個token之后會創(chuàng)建一個token的命名的文件夾以及一個同名的文件，后續(xù)post的slice都會先尋找這個token的文件夾，如果沒有找到這個文件夾就不識別這個slice，如果找到就會向同名文件內(nèi)以‘a(chǎn)b’寫入文件。當(dāng)所有的slice都post完畢，這時候還要進行文件確認，一般會通過MD5驗證文件正確性，但是我想到如果文件很大，那么前端驗證生成文件MD5會比較耗時，我看論壇有人說對于大文件只驗證第一個和最后一個slice的MD5，這或許也是個辦法。

過程

• 客戶端
  按照之前的思路進行編寫。
  客戶端根據(jù)文件大小不同，選擇不同的操作，如果文件很小，其實不需要分片上傳，可以直接上傳。對于超過設(shè)定的閾值文件再分片。
  下面就把自己寫的實驗代碼貼上來。。。。。。

這里其實還應(yīng)該在cookie中記錄下來每一個slice上傳的狀態(tài)，以防止用戶刷新頁面或關(guān)閉頁面造成狀態(tài)丟失，下面那段實驗性代碼并沒有體現(xiàn)。

home.js

$().ready(function () {

    var $progress = $('#upload_progress');
    var $fileObj; //文件
    var $isPaused = false; //暫停記號
    var $currentIndex = 0; // 當(dāng)前的slice序號
    var $errThreshold = 3; //允許的錯誤閾值
    var $token; //文件記號
    var $fileName;
    $('#upload_file').on("change",function () {
        $progress.progress('reset');
        $currentIndex = 0;
        $fileObj = this.files[0];
        $fileName = $('#upload_file').val().split('fakepath\\')[1];
        if ( this.files[0].size/1024/1024 > 1) {
            //分片上傳
            $token = new Date().getTime();
            uploadByChunk($token,$fileName)
        } else {
            uploadSimple(this.files[0])
        }
    });

    $("#pause").on("click", function () {
         $isPaused = true;
        $("#start").enable()
    });

    $("#start").on("click", function () {
        if ($isPaused) {
            $isPaused = false;
            uploadByChunk($token,$fileName);
        }
    });

    function uploadSimple(obj) {
        var formData = new FormData();
        formData.append('file', obj);
        formData.append('time',new Date().getTime());

        $.ajax({
            url: 'home/upload',
            type: 'post',
            cache: false,
            processData: false,
            contentType: false,
            data: formData,
            success: function (res) {
                alert(res + ' from success')
            },
            error: function (err) {
                alert(err + 'from error')
            }
        })
    }

    function uploadByChunk(token,fileName) {
        var size = $fileObj.size;
        var chunkSize = 1024 * 1024;
        var chunkNum = Math.ceil(size/chunkSize);

        $progress.progress('set total', chunkNum);

        $.post( 'home/check_permission', {token: token, filename: fileName})
            .done(function (res) {
                if (res.status == 200) {
                    upload($currentIndex, token, size, fileName,chunkNum, chunkSize,0);
                    console.log('success');
                    console.log(token, size,fileName,chunkNum, chunkSize)
                } else {
                    alert(res.msg);
                }
            })
            .fail(function(err){
                alert(err.msg + ' $$$');
            })
    }
    /*index of chunk
    * token
    * total size
    * filename
    * total chunk
    * size of per chunk
    * error time*/
    function upload(i, token, size, fileName, chunkNum, chunkSize, errTime) {

        $currentIndex = i;

        if ($isPaused) {
            return
        }
        var formData = new FormData();
        if (i < chunkNum && errTime<$errThreshold) {
            var slice = $fileObj.slice(chunkSize*i, chunkSize*(i+1) > size ? size : chunkSize*(i+1));
            formData.append('slice', slice, i);
            formData.append('token', token);
            formData.append('size', size);
            formData.append('filename', fileName);
            formData.append('chunk',i);
            console.log(formData.data);
            $.ajax({
                url: "home/upload_by_chunk",
                type: 'POST',
                cache: false,
                processData: false,
                contentType: false,
                data: formData,
                success: function (res) {
                    if (res.status == 200) {
                        upload(i+1, token, size, fileName, chunkNum, chunkSize,errTime);
                        $progress.progress('increment');
                        console.log(i + ' has been uploaded');
                    } else {
                        upload(i, token, size, fileName, chunkNum, chunkSize, errTime+1);
                        console.log(res.msg);
                    }
                },
                error: function (err) {
                    console.log(err.msg);
                    upload(i, token, size, fileName, chunkNum, chunkSize,errTime+1);
                }
            })
        } else if (errTime >= $errThreshold) {
            $progress.progress('set error');
            alert('failed');
        } else if (i >= chunkNum) {
            $.post("home/uploaded", {token: token, size: size, filename: fileName})
                .done(function (res) {
                    if (res.status == 200) {
                        alert('success')
                    } else {
                        $progress.progress('set error');
                        alert(res.msg)
                    }
                })
                .fail(function () {
                    upload(i, token, size, fileName, chunkNum, chunkSize, errTime+1);
                })
        }
    }
});

index.html.erb

<h1>Home#index</h1>
<p>Find me in app/views/home/index.html.erb</p>

<div>
  <a href="javascript:;" class="a-upload">
    <input type="file" name="file" id="upload_file">
    <i class="file icon"></i>upload
  </a>
  <div class="ui indicating progress" data-value="0" data-total="10" id="upload_progress">
    <div class="bar">
      <div class="progress"></div>
    </div>
    <div class="label"></div>
  </div>
  <button class="ui labeled icon button" id="pause">
    <i class="pause icon"></i>
    Pause
  </button>
  <button class="ui button" id="start">
    <i class="play icon"></i>
    Start
  </button>
</div>

<%= link_to_if(current_user.nil?, 'login', {controller: 'devise/sessions', action:'new'}) do
    link_to('logout',:destroy_user_session, method: :delete)
  end
%>

-服務(wù)器
也是按照之前的思路編寫
服務(wù)端也是需要記錄下每個slice的狀態(tài)，防止在合并文件導(dǎo)致添加順序出錯。

最開始，我是先保存每個slice然后最后在驗證文件的時候在合并。但是合并slice的時間較長，也就是上傳會卡在百分之99那里，感覺這樣體驗會很糟糕，因此我想著使用多線程合并，當(dāng)時我的思路參考的是多線程樹形求和做法，然而我并沒有這么做。。。。。。我想著既然最后一步很慢，何不把這段時間分散到每一片上傳中，這樣其實用戶并不會感受到最后一步很慢。所以就有了以依次追加寫入文件，但是這樣做一定要保證slice的順序，所以一定驗證slice的狀態(tài)。另外，由于MD5驗證問題還沒想好，我暫時用對比文件大小來確認文件，但這是不可取的，用文件大小對比是很不牢靠的。

下面貼出來實驗性代碼。。。

#home_controller.rb
class HomeController < ApplicationController
  before_action :authenticate_user!
  def index

  end

  def check_permission

    token = params[:token]
    file_name = params[:filename]

    if session[:last_token].nil? || session[:last_token] != token.to_s
      session[:last_token] = token.to_s
      session[:slice_status] = []
    end

    if !token.nil? && !file_name.nil?
      dir = "#{Rails.root}/public/uploads/#{token.to_s}/"
      Dir.mkdir(dir) unless Dir.exist?(dir)
      render json: {status: 200, msg: 'success'}
    else
      render json: {status: 500, msg: 'params error'}
    end

  end

  def upload
    temp = params[:file]
    @user_file= UserFile.new
    @user_file.info= temp
    @user_file.is_shared= false
    @user_file.is_folder= false
    @user_file.belong_to_user= current_user
    if @user_file.save
      render json: {status: params[:time]}
    else
      render json: {status: false}
    end
  end

  def upload_by_chunk
    token = params[:token]
    chunk = params[:chunk] # index of the slice
    slice = params[:slice]
    size = params[:size]
    file_name = params[:filename]
    #chunk_number = params[:chunks]
    if !chunk.nil? && !token.nil? && !slice.nil? && !size.nil? && !file_name.nil?
      dir = "#{Rails.root}/public/uploads/#{token.to_s}/"
      if Dir.exist?(dir) && !session[:slice_status].nil? && !session[:slice_status][chunk.to_i]
        File.open(dir+file_name.to_s, "ab") do |f|
          f.write(slice.read)# append mode 寫入文件
        end
        session[:slice_status][chunk.to_i] = true
        render json: {status: 200, msg: 'success'}
      elsif session[:slice_status][chunk.to_i]
        render json: {status: 200, msg: 'uploaded before'}
      else
        render json: {status: 500, msg: 'folder not founded'}
      end
    else
      render json: {status: 500, msg: 'params incorrect'}
    end
  end

  def uploaded
    token = params[:token]
    size = params[:size]
    file_name = params[:filename]

    if token.nil? || size.nil? || file_name.nil?
      render json: {status: 500, msg: 'params error'}
    else
      file_path = "#{Rails.root}/public/uploads/#{token.to_s}/#{file_name.to_s}"
      if File.exist? file_path
        if File.size(file_path) == size.to_i
          render json: {status: 200, msg: 'success'}
        else
          render json: {status: 500, msg: 'the size of the file is incorrect'}
        end
      else
        render json: {status: 500, msg: 'file not founded'}
      end
    end

  end
end

• 結(jié)尾
  至此基本功能已經(jīng)實現(xiàn)，我相信上面的思路還有很多需要完善和有很多性能提升的方法，也希望大家能夠告訴我。。。。。。后面準(zhǔn)備嘗試下樹形求和的思路來實現(xiàn)多線程的文件合并。

untitled