import uploader from 'vue-simple-uploader'
vue.use(uploader)

<template>
 <div id="global-uploader">

 <!-- 上传 -->
 <uploader
  ref="uploader"
  :options="options"
  :autostart="false"
  @file-added="onfileadded"
  @file-success="onfilesuccess"
  @file-progress="onfileprogress"
  @file-error="onfileerror"
  class="uploader-app">
  <uploader-unsupport></uploader-unsupport>

  <uploader-btn id="global-uploader-btn" :attrs="attrs" ref="uploadbtn">选择文件</uploader-btn>

  <uploader-list v-show="panelshow">
  <div class="file-panel" slot-scope="props" :class="{'collapse': collapse}">
   <div class="file-title">
   <h2>文件列表</h2>
   <div class="operate">
    <el-button @click="filelistshow" type="text" :title="collapse ? '展开':'折叠' ">
    <i class="iconfont" :class="collapse ? 'icon-fullscreen': 'icon-minus-round'"></i>
    </el-button>
    <el-button @click="close" type="text" title="关闭">
    <i class="iconfont icon-close"></i>
    </el-button>
   </div>
   </div>

   <ul class="file-list">
   <li v-for="file in props.filelist" :key="file.id">
    <uploader-file :class="'file_' + file.id" ref="files" :file="file" :list="true"></uploader-file>
   </li>
   <div class="no-file" v-if="!props.filelist.length"><i class="nucfont inuc-empty-file"></i> 暂无待上传文件</div>
   </ul>
  </div>
  </uploader-list>

 </uploader>

 </div>
</template>

data() {
 return {
 options: {
  target: 'http://xxxxx/xx', // 目标上传 url
  chunksize: '2048000', //分块大小
  fileparametername: 'file', //上传文件时文件的参数名，默认file
  maxchunkretries: 3, //最大自动失败重试上传次数
  testchunks: true, //是否开启服务器分片校验
  // 服务器分片校验函数，秒传及断点续传基础
  checkchunkuploadedbyresponse: function (chunk, message) {
  let objmessage = json.parse(message);
  if (objmessage.skipupload) {
   return true;
  }

  return (objmessage.uploaded || []).indexof(chunk.offset + 1) >= 0
  },
  headers: {
  // 在header中添加的验证，请根据实际业务来
  authorization: "bearer " + ticket.get().access_token
  },
 },
 attrs: {
  // 接受的文件类型，形如['.png', '.jpg', '.jpeg', '.gif', '.bmp'...] 这里我封装了一下
  accept: accept_config.getall()
 },
 panelshow: false, //选择文件后，展示上传panel
 }
},

<global-uploader></global-uploader>

bus.$emit('openuploader', {
 superiorid: this.superiorid
})

bus.$on('openuploader', query => {
 this.params = query || {};

 if (this.$refs.uploadbtn) {
	 // 这样就打开了选择文件的操作窗口
 $('#global-uploader-btn').click();
 }
});

onfileadded(file) {
 this.panelshow = true;
	
	// 计算md5，下文会提到
 this.computemd5(file);
},

// 文件进度的回调
onfileprogress(rootfile, file, chunk) {
 console.log(`上传中 ${file.name}，chunk：${chunk.startbyte / 1024 / 1024} ~ ${chunk.endbyte / 1024 / 1024}`)
},

onfilesuccess(rootfile, file, response, chunk) {
 let res = json.parse(response);

 // 服务器自定义的错误，这种错误是uploader无法拦截的
 if (!res.result) {
 this.$message({ message: res.message, type: 'error' });
 return
 }
	
	// 如果服务端返回需要合并
 if (res.needmerge) {
 api.mergesimpleupload({
  tempname: res.tempname,
  filename: file.name,
  ...this.params,
 }).then(data => {
  // 文件合并成功
  bus.$emit('filesuccess', data);
 }).catch(e => {});
 // 不需要合并 
 } else {
 bus.$emit('filesuccess', res);
 console.log('上传成功');
 }
},

onfileerror(rootfile, file, response, chunk) {
	console.log(error)
},

/**
* 计算md5，实现断点续传及秒传
* @param file
*/
/**
* 计算md5，实现断点续传及秒传
* @param file
*/
 computemd5(file) {
 let filereader = new filereader();
 let time = new date().gettime();
 let blobslice = file.prototype.slice || file.prototype.mozslice || file.prototype.webkitslice;
 let currentchunk = 0;
 const chunksize = 10 * 1024 * 1000;
 let chunks = math.ceil(file.size / chunksize);
 let spark = new sparkmd5.arraybuffer();
 
 // 文件状态设为"计算md5"
 this.statusset(file.id, 'md5');
 
 file.pause();
 
 loadnext();
 
 filereader.onload = (e => {
 spark.append(e.target.result);
 if (currentchunk < chunks) {
  currentchunk++;
  loadnext();
  // 实时展示md5的计算进度
  this.$nexttick(() => {
  $(`.mystatus_${file.id}`).text('校验md5 '+ ((currentchunk/chunks)*100).tofixed(0)+'%')
  })
 } else {
  let md5 = spark.end();
  this.computemd5success(md5, file);
  console.log(`md5计算完毕：${file.name} \nmd5：${md5} \n分片：${chunks} 大小:${file.size} 用时：${new date().gettime() - time} ms`);
 }
 });
 filereader.onerror = function () {
 this.error(`文件${file.name}读取出错，请检查该文件`)
 file.cancel();
 };
 function loadnext() {
 let start = currentchunk * chunksize;
 let end = ((start + chunksize) >= file.size) ? file.size : start + chunksize;
 filereader.readasarraybuffer(blobslice.call(file.file, start, end));
 }
},

computemd5success(md5, file) {
 // 将自定义参数直接加载uploader实例的opts上
 object.assign(this.uploader.opts, {
 query: {
  ...this.params,
 }
 })
 file.uniqueidentifier = md5;
 file.resume();
 this.statusremove(file.id);
},

checkchunkuploadedbyresponse: function (chunk, message) {
	 let objmessage = json.parse(message);
 if (objmessage.skipupload) {
  return true;
 }

 return (objmessage.uploaded || []).indexof(chunk.offset + 1) >= 0
},

this.statusset(file.id, 'merging');
this.statusremove(file.id);