问题描述:项目里需要上传1G以上的iso文件,而且要做成全局组件,切换各个页面的时候,上传界面还在并且上传不会受到影响,实现分片上传、秒传以及断点续传的功能,所以使用了vue-simple-uploader插件
解决方法:
组件A封装上传文件
<template>
<div id="global-uploader">
<!-- 上传 -->
<uploader
ref="uploader"
:options="options"
:autoStart="false"
@file-added="onFileAdded"
@file-success="onFileSuccess"
@file-error="onFileError"
class="uploader-app">
<uploader-unsupport></uploader-unsupport>
<uploader-btn id="global-uploader-btn" ref="uploadBtn" :attrs="attrs">选择文件</uploader-btn>
<uploader-list v-show="panelShow">
<div class="file-panel" slot-scope="props" >
<div class="file-title">
<h2 style="color:red">文件列表</h2>
<div class="operate">
<el-button @click="foldShow" type="text" title="折叠">
<i class="el-icon-minus" ></i>
</el-button>
<el-button @click="unfoldShow" type="text" title="展开">
<i class="el-icon-reading" ></i>
</el-button>
<el-button @click="close" type="text" title="关闭">
<i class="el-icon-close"></i>
</el-button>
</div>
</div>
<ul class="file-list" v-show="block" ref='fileList'>
<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="iconfont icon-empt