vue中使用Plupload分片上传

说明

Plupload有以下功能和特点：
1、拥有多种上传方式：HTML5、flash、silverlight以及传统的。Plupload会自动侦测当前的环境，选择最合适的上传方式，并且会优先使用HTML5的方式。所以你完全不用去操心当前的浏览器支持哪些上传方式，Plupload会自动为你选择最合适的方式。
2、支持以拖拽的方式来选取要上传的文件
3、支持在前端压缩图片，即在图片文件还未上传之前就对它进行压缩
4、可以直接读取原生的文件数据，这样的好处就是例如可以在图片文件还未上传之前就能把它显示在页面上预览
5、支持把大文件切割成小片进行上传，因为有些浏览器对很大的文件比如几G的一些文件无法上传。

Plupload使用步骤
1、引入plupload，可以到github上去下载，我使用的是npm install --save plupload
2、实例化一个plupload对象，传入一个配置参数对象进行各方面的配置。
3、调用plupload实例对象的init()方法进行初始化
4、在plupload实例对象上注册各种你需要的事件。plupload从选取文件到文件上传完成这个过程中，会触发很多事件。我们可以通过这些事件来跟plupload进行交互。

按照项目需求封装好的 plupload.vue

分片

分片的操作是借助spark-md5，同样下载是npm install --save spark-md5，不过为了方便使用，在封装了一层

file-md5.js

/*
 * @Author: your name
 * @Date: 2020-03-20 15:49:13
 * @LastEditTime: 2020-03-23 16:12:23
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \pc-webapp\src\models\file-md5.js
 */
'use strict'
import SparkMD5 from 'spark-md5'
export default function(file, callback) {
  var blobSlice = File.prototype.slice || File.prototype.mozSlice || File.prototype.webkitSlice
  var chunkSize = 2097152 // Read in chunks of 2MB
  var chunks = Math.ceil(file.size / chunkSize)
  var currentChunk = 0
  var spark = new SparkMD5.ArrayBuffer()
  var fileReader = new FileReader()

  fileReader.onload = function(e) {
    console.log('read chunk nr', currentChunk + 1, 'of', chunks)
    spark.append(e.target.result) // Append array buffer
    currentChunk++

    if (currentChunk < chunks) {
      loadNext()
    } else {
      callback(null, spark.end())
      console.log('finished loading')
    }
  }

  fileReader.onerror = function() {
    callback('oops, something went wrong.')
  }

  function loadNext() {
    var start = currentChunk * chunkSize
    var end = ((start + chunkSize) >= file.size) ? file.size : start + chunkSize

    fileReader.readAsArrayBuffer(blobSlice.call(file, start, end))
  }

  loadNext()
}

关于使用

file-list 已有的文件列表，比如在修改操作中数据库中已经保存的文件
limit 最大文件个数的限制
biz-type 这是我接口需要的额外参数，其他项目可能不需要
accept-files 支持的文件格式

handleFileChange(fileList) {
      console.log('handleFileChange', fileList)
}