最近项目中需要用到百度的webuploader大文件的分片上传，对接后端的fastdfs，于是着手写了这个文件上传的小插件，步骤很简单，但是其中猜到的坑也不少，详细如下：
一、封装组件
引入百度提供的webuploader.js、Uploader.swf
css样式就直接写在组件里面了
<template>
<div>
<div id="list" class="uploader-list"></div>
<div id="wrapper">
<div class="uploader-container">
<div :id="id" limitSize="1" :ext="ext"></div>
<el-button style="margin-bottom:10px;float:left;" size="small" :loading="uploadLoading" type="success" @click="start">上传到服务器</el-button>
<el-button style="margin-left: 20px;margin-bottom:10px;float:left;" :disabled="stopBtn" size="small" type="danger" @click="stop">暂停上传</el-button>
</div>
</div>
<div class="el-upload__tip">{{tip}}</div>
<div class="file-list">
<ul class="el-upload-list el-upload-list--text">
<li v-for="file in fileList" :class="['el-upload-list__item', 'is-' + file.status]" :key="file">
<a class="el-upload-list__item-name">
<i class="el-icon-document"></i>{{file.name}}
</a>
<label class="el-upload-list__item-status-label">
<i :class="{'el-icon-upload-success': true,'el-icon-circle-check': listType === 'text',
'el-icon-check': ['picture-card', 'picture'].indexOf(listType) > -1}"></i>
</label>
<i class="el-icon-close" @click="removeFile(file)"></i>
<el-progress
v-if="file.status === 'uploading'"
:type="listType === 'picture-card' ? 'circle' : 'line'"
:stroke-width="listType === 'picture-card' ? 6 : 2"
:percentage="file.percentage">
</el-progress>
</li>
</ul>
</div>
</div>
</template>
<script>
import '../js/jquery.js'
import '../js/webuploader.js'
import { Base64 } from 'js-base64'
import CryptoJS from 'crypto-js'; export default{
name: 'fileUpload',
props: {
id: {
type: String,
default: function(){
return "filePicker";
}
},
//上传提示
tip: {
type: String,
default: function(){
return "";
}
},
//文件后缀名限制
ext: {
type: String,
default: function(){
return "jpg,jpeg,png,pdf,mp4,avi.mp3";
}
},
//分片大小设置
chunkSize: {
type: Number,
default: function(){
return 2097152;
}
},
//分片上传重试次数
