Web Uploader 分片上传 组件

官网下载 Web Uploader包 放入项目 static 文件夹下

下载 - Web Uploader http://fex.baidu.com/webuploader/download.htmlcomponents中新增  upload.vue

<template>
    <section class="content">
        <div class="container">
            <div class="alert alert-info">可以上传大文件</div>
        </div>

        <div class="container" style="margin-top: 16px">
            <div id="uploader" class="container">
                <div class="container">
                    <div id="fileList" class="uploader-list"></div>
                    <!--存放文件的容器-->
                </div>
                <div class="btns">
                    <div
                        id="picker"
                        class="webuploader-container"
                        style="
                            float: left;
                            margin-right: 10px;
                            widows: 86px;
                            height: 39px;
                        "
                    >
                        <div>
                            选择文件
                            <input
                                type="file"
                                name="file"
                                class="webuploader-element-invisible"
                                multiple="multiple"
                            />
                        </div>
                    </div>

                    <div
                        id="UploadBtn"
                        class="webuploader-pick"
                        style="float: left; margin-right: 10px"
                    >
                        开始上传
                    </div>
                    <div
                        id="StopBtn"
                        class="webuploader-pick"
                        style="float: left; margin-right: 10px"
                        status="suspend"
                    >
                        暂停上传
                    </div>
                </div>
            </div>
        </div>
    </section>
</template>
<script>
import "../static/upload/js/jquery-2.1.1.min.js";
import "../static/upload/webuploader/webuploader.css";
import "../static/upload/webuploader/webuploader.nolog";
import { setStore, getStore, removeStroe } from "../utils/storage.js";
import { ElMessageBox, ElMessage } from "element-plus";
export default {
    props: {
        id: String,
    },
    mounted() {
        // 获取依赖的资源 - 如果需要异步加载的话
        Promise.all([]).then(() => {
            let that = this;
            $(function () {
                var $list = $("#fileList");
                var flie_count = 0;
                var uploader = WebUploader.create({
                    //设置选完文件后是否自动上传
                    auto: false,
                    //swf文件路径
                    swf: "static/webuploader/Uploader.swf",
                    // 文件接收服务端。
                    // server: 'micro/BigFileUp',
                    server: "https://service.pututek.com/informationpush/material/upload",
                    // server: "http://192.168.1.107:7001/informationpush/material/upload",
                    // 选择文件的按钮。可选。
                    // 内部根据当前运行是创建，可能是input元素，也可能是flash.
                    pick: "#picker",
                    chunked: true, //开启分块上传
                    chunkSize: 10 * 1024 * 1024,
                    chunkRetry: 3, //网络问题上传失败后重试次数
                    threads: 1, //上传并发数
                    //fileNumLimit :1,
                    fileSizeLimit: 2000 * 1024 * 1024, //最大2GB
                    fileSingleSizeLimit: 2000 * 1024 * 1024,
                    resize: false, //不压缩
                    //选择文件类型
                    accept: {
                        // title: "Video",
                        // extensions: "mp4,avi",
                        mimeTypes:
                            "video/*,image/*,.mp3,.doc,.docx,.xlsx,.xls,.pptx,.pdf",
                    },
                });
                // 当有文件被添加进队列的时候
                uploader.on("fileQueued", function (file) {
                    // if (!file) {
                    //     return ElMessage({
                    //         type: "error",
                    //         message: "请先选择需要上传的文件",
                    //     });
                    // }
                    $list.append(
                        '<div id="' +
                            file.id +
                            '" class="item">' +
                            '<h4 class="info">' +
                            file.name +
                            '<button type="button" fileId="' +
                            file.id +
                            '" class="btn btn-danger btn-delete"><span class="glyphicon glyphicon-trash"></span></button></h4>' +
                            '<p class="state">正在计算文件MD5...请等待计算完毕后再点击上传！</p><input type="text" id="s_WU_FILE_' +
                            flie_count +
                            '" />' +
                            "</div>"
                    );
                    console.info("id=file_" + flie_count);
                    flie_count++;

                    //删除要上传的文件
                    //每次添加文件都给btn-delete绑定删除方法
                    $(".btn-delete").click(function () {
                        //console.log($(this).attr("fileId"));//拿到文件id
                        uploader.removeFile(
                            uploader.getFile($(this).attr("fileId"), true)
                        );
                        $(this).parent().parent().fadeOut(); //视觉上消失了
                        $(this).parent().parent().remove(); //DOM上删除了
                    });
                    //uploader.options.formData.guid = WebUploader.guid();//每个文件都附带一个guid，以在服务端确定哪些文件块本来是一个
                    //console.info("guid= "+WebUploader.guid());

                    //md5计算
                    uploader
                        .md5File(file)
                        .progress(function (percentage) {
                            console.log("Percentage:", percentage);
                        })
                        // 完成
                        .then(function (fileMd5) {
                            // 完成
                            var end = +new Date();
                            console.log(
                                "before-send-file  preupload: file.size=" +
                                    file.size +
                                    " file.md5=" +
                                    fileMd5
                            );
                            file.wholeMd5 = fileMd5; //获取到了md5
                            //uploader.options.formData.md5value = file.wholeMd5;//每个文件都附带一个md5，便于实现秒传

                            $("#" + file.id)
                                .find("p.state")
                                .text("MD5计算完毕，可以点击上传了");
                            console.info("MD5=" + fileMd5);
                        });
                });
                // 文件上传过程中创建进度条实时显示。
                uploader.on("uploadProgress", function (file, percentage) {
                    // console.log(file, percentage);
                    var $li = $("#" + file.id),
                        $percent = $li.find(".progress .progress-bar");
                    // 避免重复创建
                    if (!$percent.length) {
                        $percent = $(
                            '<div class="progress progress-striped active">' +
                                '<div class="progress-bar" role="progressbar" style="width: 0%">' +
                                "</div>" +
                                "</div>"
                        )
                            .appendTo($li)
                            .find(".progress-bar");
                    }
                    $li.find("p.state").text("上传中");
                    $percent.css("width", percentage * 100 + "%");
                    if (percentage == 1) {
                        debugger;
                        that.$emit("getMaterialList", getStore("fdrId"));
                    }
                });
                //发送前填充数据
                uploader.on(
                    "uploadBeforeSend",
                    function (block, data, headers) {
                        // block为分块数据。
                        headers["INFORMATIONPUTUID"] = JSON.parse(
                            localStorage.getItem("userToken")
                        ).data;
                        // file为分块对应的file对象。
                        var file = block.file;
                        var fileMd5 = file.wholeMd5;
                        // 修改data可以控制发送哪些携带数据。

                        console.info(
                            "fileName= " +
                                file.name +
                                " fileMd5= " +
                                fileMd5 +
                                " fileId= " +
                                file.id
                        );
                        console.info("input file= " + flie_count);
                        // 将存在file对象中的md5数据携带发送过去。
                        data.md5value = fileMd5; //md5
                        data.fileName_ = $("#s_" + file.id).val();
                        console.log("fileName_: " + data.fileName_);
                        console.log(getStore("fdrId"));
                        data.fdrId = getStore("fdrId");
                        // 删除其他数据
                        // delete data.key;
                        if (block.chunks > 1) {
                            //文件大于chunksize 分片上传
                            data.isChunked = true;
                            console.info("data.isChunked= " + data.isChunked);
                        } else {
                            data.isChunked = false;
                            console.info("data.isChunked=" + data.isChunked);
                        }
                    }
                );
                uploader.on("uploadSuccess", function (file) {
                    $("#" + file.id)
                        .find("p.state")
                        .text("已上传");
                    $("#" + file.id)
                        .find(".progress")
                        .find(".progress-bar")
                        .attr("class", "progress-bar progress-bar-success");
                    $("#" + file.id)
                        .find(".info")
                        .find(".btn")
                        .fadeOut("slow"); //上传完后删除"删除"按钮
                    $("#StopBtn").fadeOut("slow");
                });
                uploader.on("uploadError", function (file) {
                    $("#" + file.id)
                        .find("p.state")
                        .text("上传出错");
                    //上传出错后进度条变红
                    $("#" + file.id)
                        .find(".progress")
                        .find(".progress-bar")
                        .attr("class", "progress-bar progress-bar-danger");
                    //添加重试按钮
                    //为了防止重复添加重试按钮，做一个判断
                    //var retrybutton = $('#' + file.id).find(".btn-retry");
                    //$('#' + file.id)
                    if ($("#" + file.id).find(".btn-retry").length < 1) {
                        var btn = $(
                            '<button type="button" fileid="' +
                                file.id +
                                '" class="btn btn-success btn-retry"><span class="glyphicon glyphicon-refresh"></span></button>'
                        );
                        $("#" + file.id)
                            .find(".info")
                            .append(btn); //.find(".btn-danger")
                    }
                    $(".btn-retry").click(function () {
                        //console.log($(this).attr("fileId"));//拿到文件id
                        uploader.retry(
                            uploader.getFile($(this).attr("fileId"))
                        );
                    });
                });
                uploader.on("uploadComplete", function (file) {
                    //上传完成后回调
                    //$('#' + file.id).find('.progress').fadeOut();//上传完删除进度条
                    //$('#' + file.id + 'btn').fadeOut('slow')//上传完后删除"删除"按钮
                });
                uploader.on("uploadFinished", function () {
                    //上传完后的回调方法
                    //alert("所有文件上传完毕");
                    //提交表单
                });
                $("#UploadBtn").click(function () {
                    uploader.upload(); //上传
                });
                $("#StopBtn").click(function () {
                    console.log($("#StopBtn").attr("status"));
                    var status = $("#StopBtn").attr("status");
                    if (status == "suspend") {
                        console.log("当前按钮是暂停，即将变为继续");
                        $("#StopBtn").html("继续上传");
                        $("#StopBtn").attr("status", "continuous");
                        console.log("当前所有文件===" + uploader.getFiles());
                        console.log("=============暂停上传==============");
                        uploader.stop(true);
                        console.log(
                            "=============所有当前暂停的文件============="
                        );
                        console.log(uploader.getFiles("interrupt"));
                    } else {
                        console.log("当前按钮是继续，即将变为暂停");
                        $("#StopBtn").html("暂停上传");
                        $("#StopBtn").attr("status", "suspend");
                        console.log(
                            "===============所有当前暂停的文件=============="
                        );
                        console.log(uploader.getFiles("interrupt"));
                        uploader.upload(uploader.getFiles("interrupt"));
                    }
                });
                uploader.on("uploadAccept", function (file, response) {
                    ElMessage({
                        type: "success",
                        message: response.message,
                    });
                    if (response._raw === '{"error":true}') {
                        return false;
                    }
                });
            });
        });
    },
    destoryed() {
        // 解绑全局事件
        // 销毁实例
    },
    methods: {
        // 返回一些有用的函数
    },
};
</script>
<style lang="less">
.progress {
    margin-top: 12px;
    width: 190px;
    height: 12px;
    background: #f3f3f3;
    border-radius: 6px;
    .progress-bar {
        width: 100%;
        height: 100%;
        background: #0aa1ed;
        border-radius: 6px;
    }
    .progress-bar-danger {
        background: red !important;
    }
}
.content {
    height: 470px;
}
#uploader {
    .container {
        margin-bottom: 24px;
        .uploader-list {
            height: 360px;
            overflow-y: auto;
        }
    }
}
#picker {
    position: relative;
    width: 86px !important;
    label {
        height: 39px !important;
        width: 86px !important;
    }
    div {
        height: 39px !important;
        width: 86px !important;
    }
    .webuploader-pick {
        width: 86px !important;
        position: absolute;
        top: 0;
        left: 0;
        div {
            position: absolute;
            top: 0;
            left: 0;
            padding: 10px 15px;
        }
    }
}
</style>

使用时引用即可

//html

 <upload
            :fdrId="formFile.fdrId"  //传递属性
            @getMaterialList="getMaterialList"  //传递事件
        ></upload> 



//js
import upload from "../../components/upload.vue";

 components: {
        upload,
    },