大文件切片上传，支持断点上传

最近项目中遇到了大文件上传在IE下经常崩溃，这里我找到一个非常好用的插件分享给大家vue-simple-uploader
读这篇文章之前，建议先读一遍simple-uploader.js的文档

直接上代码
安装 npm install vue-simple-uploader --save

使用：在main.js中：

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

注册全局组件
html

<template>
    <el-dialog 
        title="上传大资源" 
        :visible="isShowUP"
        :close-on-click-modal="false"
        :close-on-press-escape="false"
        center
        width="50%"
        append-to-body
        @close="handelClose"
    >
        <uploader
            ref="uploader"
            :options="options"
            :file-status-text="statusText"
            :auto-start="false"
            class="uploader-example"
            @file-added="onFileAdded"
            @file-success="onFileSuccess"
            @file-error="onFileError"
            @file-removed="fileRemoved"
        >
            <uploader-btn v-show="show_up" single style="background-color: #67C13B">
                <i class="el-icon-upload" style="margin-right: 5px"></i>上传文件</uploader-btn>
            <uploader-list></uploader-list>
        </uploader>
        <div slot="footer" class="dialog-footer">
            <el-button v-show="!done" @click="cancelUpload">取消上传</el-button>
            <el-button v-show="done" type="success" @click="handelClose(true)">完成上传</el-button>
            <el-button type="primary" @click="submitUpload">开始上传</el-button>
        </div>
    </el-dialog>
</template>

script

import { mapActions } from "vuex";
import { showError,showLoading,showMessage } from '../../utils';

export default {
    name: "UPLoder",
    props:{
        visible: {
            type: Boolean,
            default: false
        },
    },
    data() {
        return {
            isShowUP:false,  // 弹窗开关
            show_up: true,   // 选择文件按钮
            done: false,     // 完成，取消
            options: {
                target: "/api/uploader/save", // 上传地址
                maxChunkRetries: 2, // 失败重试
                chunkSize: 10 * 1024 * 1024, // 分片大小
                simultaneousUploads: 3, //并发上传数
                query: {   // 携带参数
                    type: "attach",
                    id: "",
                    appId:this.$store.state['cms/site'].site.id
                },
                headers: { // 头信息
                    token: this.$store.state.authen.token
                }
            },
            uploaderData:null,  // 成功后返回路径
            statusText: {       // 提示语
                success: "上传成功",
                error: "上传失败",
                uploading: "上传中",
                paused: "暂停中",
                waiting: "等待中"
            },
            uploadType:{    // 类型
                image:['jpg','jpeg','png','svg','gif'],
                video:['mp4','avi','mpeg','webm','ogg'],
                audio:['wav','mp3','wma']
            },
        };
    },
    watch: {
        visible(v) {
            this.isShowUP = v
        },
    },
    methods: {
        ...mapActions("authen", ["combine"]),  // 合并接口
        //添加文件到列表还未上传,每添加一个文件，就会调用一次,在这里过滤并收集文件夹中文件格式不正确信息，同时把所有文件的状态设为暂停中
        onFileAdded(file) {
            // 这里只做单文件上传 所以选择文件按钮隐藏
            this.show_up = false  
            // 携带唯一id
            this.options.query.id = file.uniqueIdentifier + "-" + new Date().getTime();
            // 获取选择文件的后缀
            let file_type = file.name.substring(file.name.lastIndexOf(".") + 1);
            // 进行判定类型   默认为附件(attach)
            this.uploadType.image.forEach(tp=>{
                file_type==tp && (this.options.query.type = 'image')
            })
            this.uploadType.video.forEach(tp=>{
                file_type==tp && (this.options.query.type = 'video')
            })
            this.uploadType.audio.forEach(tp=>{
                file_type==tp && (this.options.query.type = 'audio')
            })
        },
        //每个文件传输给后端之后，返回的信息
        onFileSuccess(rootFile, file, response, chunk) {
            // 返回的信息是字符串形式,对其进行转换
            let res = JSON.parse(response);
            // 如果成功
            if (res.success) {
                showLoading(true,'正在合并...')
                // 发送合并请求
                this.combine({
                    id: this.options.query.id,
                    type: this.options.query.type,
                    filename: file.name
                }).then(res => {
                    // 接收相应
                    this.uploaderData = {type:this.options.query.type,data:res.data}
                    // 切换完成按钮
                    this.done = true;
                    showMessage('上传成功！')
                    showLoading()
                });
            } else {
                showError(res.errMsg)
                showLoading()
            }
        },
        // 上传错误触发，文件还未传输到后端
        onFileError(rootFile, file, response, chunk) {
            showError('文件上传失败')
        },
        // 移除文件
        fileRemoved(file) {
            this.$nextTick(() => {
                this.show_up = true;
                this.done = false;
            });
        },
        //点击开始上传按钮
        submitUpload() {
            this.$nextTick(() => {
                for (var i = 0; i < this.$refs["uploader"].files.length; i++) {
                    this.$refs["uploader"].files[i].resume();
                }
            });
        },
       
        // 上传弹框关闭
        handelClose(v=false) {
            this.clearcache()
            this.$emit('closePublishModal', false)
            // 判断是完成还是关闭
            v && this.$emit('uploaderData',this.uploaderData)
        },
        // 清除缓存
        clearcache() {
            this.show_up = true;
            this.done = false;
            this.options.query.id = ''
            this.options.query.type = 'attach'
            this.$refs.uploader.uploader.cancel();
        },
        //取消上传
        cancelUpload() {
            this.thirdDialog = false;
            this.clearcache();
        }
    }
};

style

<style lang="scss">
.dialog-footer {
    text-align: center;
}
.uploader-example .uploader-btn {
    margin-right: 8px;
    color: #ffffff;
    border: #ffffff;
}
.uploader-file{
    margin-top: 10px;
    border: 1px solid #ccc;
    .uploader-file-icon {
        &:before {
            content: '' !important;
        }
        &[icon=image] {
            background: url(./image/image-icon.png);
        }
        &[icon=video] {
            background: url(./image/video-icon.png);
        }
        &[icon=document] {
            background: url(./image/text-icon.png);
        }
        &[icon=audio]:before {
            content: "\1F3B5" !important;
        }
        &[icon=unknown]:before {
            content: "\1F4C3" !important;
        }
    }
}

有疑问，有问题，有好点子欢迎指教^v^ ^v^ ^v^ ^v^ ^v^