大文件断点续传

对于大文件，往往需要通过断点续传来应对不稳定的网络环境。这几天正好做毕设，记下来断点续传的一些想法

H5断点续传

• 思路
  断点续传的第一步是对文件进行分片。分片之后上传每一个slice。
  这其中重要的是让服务器认识到这是同一个文件的slice，我是每一次在上传之前先post生成的token和文件名，然后服务器端收到这个token之后会创建一个token的命名的文件夹以及一个同名的文件，后续post的slice都会先寻找这个token的文件夹，如果没有找到这个文件夹就不识别这个slice，如果找到就会向同名文件内以‘ab’写入文件。当所有的slice都post完毕，这时候还要进行文件确认，一般会通过MD5验证文件正确性，但是我想到如果文件很大，那么前端验证生成文件MD5会比较耗时，我看论坛有人说对于大文件只验证第一个和最后一个slice的MD5，这或许也是个办法。

过程

• 客户端
  按照之前的思路进行编写。
  客户端根据文件大小不同，选择不同的操作，如果文件很小，其实不需要分片上传，可以直接上传。对于超过设定的阈值文件再分片。
  下面就把自己写的实验代码贴上来。。。。。。

这里其实还应该在cookie中记录下来每一个slice上传的状态，以防止用户刷新页面或关闭页面造成状态丢失，下面那段实验性代码并没有体现。

home.js

$().ready(function () {

    var $progress = $('#upload_progress');
    var $fileObj; //文件
    var $isPaused = false; //暂停记号
    var $currentIndex = 0; // 当前的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
%>

-服务器
也是按照之前的思路编写
服务端也是需要记录下每个slice的状态，防止在合并文件导致添加顺序出错。

最开始，我是先保存每个slice然后最后在验证文件的时候在合并。但是合并slice的时间较长，也就是上传会卡在百分之99那里，感觉这样体验会很糟糕，因此我想着使用多线程合并，当时我的思路参考的是多线程树形求和做法，然而我并没有这么做。。。。。。我想着既然最后一步很慢，何不把这段时间分散到每一片上传中，这样其实用户并不会感受到最后一步很慢。所以就有了以依次追加写入文件，但是这样做一定要保证slice的顺序，所以一定验证slice的状态。另外，由于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

• 结尾
  至此基本功能已经实现，我相信上面的思路还有很多需要完善和有很多性能提升的方法，也希望大家能够告诉我。。。。。。后面准备尝试下树形求和的思路来实现多线程的文件合并。

untitled