踩坑Webuploader视频上传

前言

由于我们公司的业务需要，我们必须开发一个兼容IE8+浏览器的视频上传功能，并且还支持多选断点上传。经过一番调研，我们选择了百度WebFE(FEX)团队开发的WebUploader文件上传插件来实现此业务功能。

准备工作

首先，我们需要准备一下DOM结构，它包含存放文件信息的容器、选择按钮和上传按钮三个部分。结构如下：

<div id="uploader">
  <div class="queueList">
    <div id="dndArea" class="placeholder">
      <div id="filePicker"></div>
      <p>或将照片拖到这里，开始上传</p>
    </div>
  </div>
  <div class="statusBar">
    <div class="progress">
      <span class="text">0%</span>
      <span class="percentage"></span>
    </div>
    <div class="info"></div>
    <div class="btns">
      <div id="filePicker2"></div>
      <div class="uploadBtn">开始上传</div>
    </div>
  </div>
</div>

使用WebUploader进行视频上传

接下来，我们就可以开始使用WebUploader进行视频上传了。首先，我们需要引入WebUploader的JS和CSS文件：

<script src="webuploader.min.js"></script>
<link rel="stylesheet" href="webuploader.css">

然后，我们就可以初始化WebUploader对象了：

var uploader = WebUploader.create({
  // 选完文件后，是否自动上传。
  auto: true,

  // swf文件路径
  swf: 'Uploader.swf',

  // 文件接收服务端。
  server: 'http://example.com/upload',

  // 选择文件的按钮。可选。
  // 内部根据当前运行是创建，可能是input元素，也可能是flash.
  pick: '#filePicker',

  // 只允许选择视频文件。
  accept: {
    title: 'Videos',
    extensions: 'mp4,mov,avi',
    mimeTypes: 'video/*'
  },

  // 不压缩image, 默认如果是jpeg，文件上传前会压缩一把再上传！
  resize: false
});

实现断点续传

为了实现断点续传，我们需要在服务端实现断点续传的功能。同时，还需要在WebUploader中设置如下配置：

uploader.on('uploadProgress', function(file, percentage) {
  var $li = $('#' + file.id),
    $percent = $li.find('.progress .percentage');

  // 避免重复创建
  if (!$percent.length) {
    $percent = $('<p class="percentage"></p>').appendTo($li.find('.progress'))
      .html(percentage * 100 + '%');
  } else {
    $percent.html(percentage * 100 + '%');
  }

  // 总体进度条
  $('.progress .text').html(Math.round(uploader.uploadProgress() * 100) + '%');
});

uploader.on('uploadSuccess', function(file) {
  $('#' + file.id).addClass('upload-state-done');
});

uploader.on('uploadError', function(file) {
  $('#' + file.id).addClass('upload-state-error');
});

uploader.on('uploadComplete', function(file) {
  $('#' + file.id).find('.progress').fadeOut();
});

兼容IE8+浏览器

为了兼容IE8+浏览器，我们需要在WebUploader中设置如下配置：

uploader.flashSwfUrl = 'path/to/Uploader.swf';

同时，还需要在HTML中添加如下代码：

<!--[if lt IE 9]>
<script src="excanvas.js"></script>
<![endif]-->

结语

以上就是我使用WebUploader进行视频上传时踩坑的经历以及解决方案。希望能对大家有所帮助。