vue-simple-uploader 的使用(学习笔记)

ZHB_Sunday

已于 2024-03-06 17:10:59 修改

阅读量2k

点赞数 21

分类专栏：前端学习笔记文章标签： vue.js 学习笔记

于 2024-03-06 17:09:49 首次发布

本文链接：https://blog.csdn.net/weixin_45608414/article/details/136511079

版权

前端学习笔记专栏收录该内容

12 篇文章 0 订阅

订阅专栏

1.背景: vue-simple-uploader 用于进行文件夹的上传，且项目要支持上传大文件，elementUI并不支持上传文件夹，所以使用vue-simple-uploader。

2.特点:

支持文件、多文件、文件夹上传；支持拖拽文件、文件夹上传;
可暂停、继续上传、分块上传；
文档：https://github.com/simple-uploader/Uploader/blob/develop/README_zh-CN.md

3.vue-simple-uploader的安装：

命令：npm install vue-simple-uploader --save

在main.js 中

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

配置选项：

options: {
        target: 'http://localhost:8080', // SpringBoot后台接收文件夹数据的接口
        simultaneousUploads: 10, // 支持同时上传数量
        autoStart: false, // 自动上传
        panelShow: false,
        allowDuplicateUploads: false, // 上传过得文件不可以再上传
        testChunks: false, // 是否分片-不分片
        chunkSize: '102400000000',//块大小
        //query参数是带有数据的post的额外参数，policy、OSSAccessKeyId和signature是获取到的后端签名返回，success_action_status需设置为 200
        query: (file) => {
          
          return {
            name: file.name,
            key: file.key,
            policy,
            OSSAccessKeyId: accessId,
            signature,
            success_action_status: 200,
          };
        },
      }

4.常用的方法

fileAdded(file, event): 用于文件的验证，可以判断可接受的文件类型，不支持的格式会返回false,拒绝上传，添加文件时，同样也可使用浏览器的event对象;
filesAdded(files, fileList, event): 和.fileAdded相同，不过是用于多文件的验证;
fileSuccess(rootFile, file, message, chunk):完成一个特定的文件上传，rootFile是根文件夹，file是要上传的文件对象，message是服务器返回的响应信息，第四个参数' chunk '是' Uploader.Chunk '的实例;
complete():所有的文件都上传成功;
fileProgress(rootFile): 获取文件上传的进度,rootFile是所有文件;
fileError(rootFile, file, message, chunk):特定的文件上传失败，可在这个回调函数中给用户提示

5.使用：

1.DOM部分

<template>
    <!-- 上传器 -->
    <uploader ref='uploader' :options='options' :autoStart=false :file-status-text='fileStatusText'
        @file-added='onFileAdded' @file-success='onFileSuccess' @file-removed="filesRemove" @file-error='onFileError'
        class='uploader-ui'>
        <uploader-unsupport></uploader-unsupport>
        <uploader-drop>
            <div>
                <uploader-btn id='global-uploader-btn' :attrs='attrs' ref='uploadBtn'>
                    选择文件
                    <i class='el-icon-upload el-icon--right'></i>
                </uploader-btn>
            </div>
        </uploader-drop>
        <uploader-list></uploader-list>
    </uploader>
</template>

2.script部分

<script>

export default {
    
    data() {
        return {
            options: {
                //目标上传 URL，默认POST
                target: process.env.VUE_APP_BASE_URL + '/uploader/chunk',
                //分块大小(单位：字节)
                chunkSize: '2048000',
                //上传文件时文件内容的参数名，对应chunk里的Multipart对象名，默认对象名为file
                fileParameterName: 'upfile',
                //失败后最多自动重试上传次数
                maxChunkRetries: 3,
                changeOrigin: true,
                //是否开启服务器分片校验，对应GET类型同名的target URL
                testChunks: true,
                headers: { 'Authorization': 'Bearer ' + localStorage.getItem('token') },
                /*
                服务器分片校验函数，判断秒传及断点续传,传入的参数是Uploader.Chunk实例以及请求响应信息
                reponse码是successStatuses码时，才会进入该方法
                reponse码如果返回的是permanentErrors 中的状态码，不会进入该方法，直接进入onFileError函数 ，并显示上传失败
                reponse码是其他状态码，不会进入该方法，正常走标准上传
                checkChunkUploadedByResponse函数直接return true的话，不再调用上传接口
                */
                checkChunkUploadedByResponse: function (chunk, response_msg) {
                    let objMessage = JSON.parse(response_msg);
                    if (objMessage.skipUpload) {
                        return true;
                    }
                    return (objMessage.uploadedChunks || []).indexOf(chunk.offset + 1) >= 0;
                }
            },
            attrs: {
                accept: ACCEPT_CONFIG.getAll()
            },
            fileStatusText: {
                success: '上传成功',
                error: '上传失败',
                uploading: '上传中',
                paused: '暂停',
                waiting: '等待上传'
            }
        };
    },
    methods: {
        onFileAdded(file) {
            this.computeMD5(file);
        },
        /*
        第一个参数 rootFile 就是成功上传的文件所属的根 Uploader.File 对象，它应该包含或者等于成功上传文件；
        第二个参数 file 就是当前成功的 Uploader.File 对象本身；
        第三个参数就是 message 就是服务端响应内容，永远都是字符串；
        第四个参数 chunk 就是 Uploader.Chunk 实例，它就是该文件的最后一个块实例，如果你想得到请求响应码的话，chunk.xhr.status就是
        */
        onFileSuccess(rootFile, file, response, chunk) {
            //refProjectId为预留字段，可关联附件所属目标，例如所属档案，所属工程等
            file.refProjectId = '123456789';
            console.log('::::', file);
            let data = file
            data.filename = file.name
            data.identifier = file.uniqueIdentifier
            data.totalSize = file.size
            data.alluxioPath = this.sendContent.alluxioPath
            data.userStorageId = this.sendContent.id
            console.log('file', file, data)

            mergeFile(data).then(res => {
                console.log('23342', res)
                console.log('父组件', this.$parent)
                // if (res.code === 415) {
                //     console.log('合并操作未成功，结果码：' + res.code);
                // }
                if (res.code == 200) {
                    if (this.sendContent.idArray && this.sendContent.idArray.length > 0) {
                        this.sendContent.idArray.forEach((item) => {
                            // this.$parent.refreshList(item)
                            console.log('aaaaaaaaa',item)
                            this.$emit('refresh', item)
                            this.$emit('getFather')
                        })
                        this.$message.success(res.message)
                    }
                } else {
                    this.$message.error(res.message)
                }
            })
            // .catch(function (error) {
            //     console.log('合并后捕获的未知异常：' + error);
            // });
        },

        filesRemove(file) {
            // this.$refs.uploader.pause();
            file.paused = true
            let data = file
            data.filename = file.name
            data.identifier = file.uniqueIdentifier
            data.totalSize = file.size
            data.alluxioPath = this.sendContent.alluxioPath
            data.userStorageId = this.sendContent.id
            deleteMkFile(data).then((res) => {
                console.log('delete', res)
                if (res.code == 200) {
                    this.$message.success(res.msg)
                } else {
                    this.$message.error(res.msg)
                }
            })
            // const uploaderInstance = this.$refs.uploader.uploader;
            // let temp = uploaderInstance.fileList.findIndex(e => e.uniqueIdentifier === file.uniqueIdentifier)
            // if (temp > -1) {
            //     uploaderInstance.fileList[temp].cancel();   //这句代码是删除所选上传文件的关键
            // }
        },

        onFileError(rootFile, file, response, chunk) {
            console.log('上传完成后异常信息：' + response);
        },

        /**
         * 计算md5，实现断点续传及秒传
         * @param file
         */
        computeMD5(file) {
            file.pause();

            //单个文件的大小限制2G
            let fileSizeLimit = 2 * 1024 * 1024 * 1024;
            console.log('文件大小：' + file.size);
            console.log('限制大小：' + fileSizeLimit);
            console.log('alluxioPath' + this.sendContent.alluxioPath);
            // if (file.size > fileSizeLimit) {
            //     this.$message({
            //         showClose: true,
            //         message: '文件大小不能超过2G'
            //     });
            //     file.cancel();
            // }

            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太慢，因此采用只计算第1块文件的md5的方式
            let chunkNumberMD5 = 1;

            loadNext();

            fileReader.onload = (e => {
                spark.append(e.target.result);

                if (currentChunk < chunkNumberMD5) {
                    loadNext();
                } else {
                    let md5 = spark.end();
                    file.uniqueIdentifier = md5;
                    file.resume();
                    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));
                currentChunk++;
                console.log('计算第' + currentChunk + '块');
            }
        },
        close() {
            this.uploader.cancel();
        },
        error(msg) {
            this.$notify({
                title: '错误',
                message: msg,
                type: 'error',
                duration: 2000
            });
        }
    }
};
</script>