1 Star 0 Fork 39

sharenet / webupload-vue

forked from luke / webupload-vue 
加入 Gitee
与超过 1200万 开发者一起发现、参与优秀开源项目,私有仓库也完全免费 :)
免费加入
克隆/下载
贡献代码
同步代码
取消
提示: 由于 Git 不支持空文件夾,创建文件夹后会生成空的 .keep 文件
Loading...
README
MIT

webupload-vue

介绍

使用vue+elementUI+webupload制作大文件分片上传插件,支持断点续传,文件MD5校验,分片md5校验,第一次上传成功,第二次上传同一个文件是就是文件秒传,从而达到秒传的目的 后端地址:https://gitee.com/hhjNavy/webupload.git, 插件在:src/components/common/upload/WebUpload.vue, 演示demo:src/components/page/sys/FileList.vue

效果图

输入图片说明 输入图片说明 输入图片说明 输入图片说明 输入图片说明 输入图片说明

效果演示

  1. 克隆项目到本地,需要结合后台演示,所有需要克隆后端项目:https://gitee.com/hhjNavy/webupload.git
  2. 把相关环境安装好,启动前端,后端
  3. 访问 http://localhost:8081/#/filelist,就可以动手自己去点击体验了

使用说明

  1. 可以将src/components/common/upload下的WebUpload.vue插件复制拷贝到自己项目下(需要将src/assets/Uploader.swf拷贝到自己静态资源文件夹下),安装webupload、jquery
    cnpm i webuploader -S    
    cnpm i jquery -S  
    
  1. 后台提供对应接口及参数,前端引入WebUpload.vue,后端参考:https://gitee.com/hhjNavy/webupload.git 前端参考:src/components/page/sys/FileList.vue
<template>
    <div>
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item>
                    <i class="el-icon-lx-cascades"></i> 文件列表
                </el-breadcrumb-item>
            </el-breadcrumb>
        </div>

        <div class="container">
            <div class="handle-box">
               <div>
                   <el-input v-model="query.orgName" placeholder="文件文件名" class="handle-input mr10"></el-input>
                   <el-input v-model="query.fileType" placeholder="文件类型" class="handle-input mr10"></el-input>
                   <el-button type="primary" icon="el-icon-search" @click="handleSearch">搜索</el-button>
               </div>
                <div style="margin: 10px 0 -10px 0;">
                    <el-button
                            type="primary"
                            size="mini"
                            icon="el-icon-plus"
                            class="handle-del mr10"
                            @click="addAllSelection"
                    >上传文件</el-button>
                    <el-button
                            type="danger"
                            size="mini"
                            icon="el-icon-delete"
                            class="handle-del mr10"
                            @click="delAllSelection"
                    >批量删除</el-button>
                    <!--<el-button type="primary" size="mini" icon="el-icon-top" @click="showExportExcel">Excel导入</el-button>-->
                    <!--<input type="file" ref="clearFile" @change="readFile($event)" multiple="multiplt" class="add-file-right-input" style="margin-left:70px;" accept=".xlsx,.xls">-->
                </div>
            </div>
            <el-table
                    v-loading="loading"
                    element-loading-text="拼命加载中"
                    :data="tableData"
                    border
                    class="table"
                    ref="multipleTable"
                    header-cell-class-name="table-header"
                    @selection-change="handleSelectionChange"
            >

                <el-table-column type="expand">
                    <template slot-scope="props">
                        <el-form   label-width="110px" class="demo-table-expand">
                            <el-form-item label="ID">
                                <span>{{ props.row.id}}</span>
                            </el-form-item>
                            <el-form-item label="原文件名">
                                <span>{{ props.row.orgName }}</span>
                            </el-form-item>
                            <el-form-item label="生产文件名">
                                <span>{{ props.row.serverLocalName }}</span>
                            </el-form-item>
                            <el-form-item label="服务器储存路径">
                                <span>{{ props.row.serverLocalPath }}</span>
                            </el-form-item>
                            <el-form-item label="访问路径">
                                <el-link :href="props.row.networkPathURL" target="_blank">{{ props.row.networkPathURL }}</el-link>
                                <!--<span>{{ props.row.networkPathURL }}</span>-->
                            </el-form-item>
                            <el-form-item label="文件MD5值">
                                <span>{{ props.row.md5Value }}</span>
                            </el-form-item>
                            <el-form-item label="文件大小">
                                <span>{{ props.row.fileSizeStr }}</span>
                            </el-form-item>

                            <el-form-item label="文件类型">
                                <span>{{ props.row.fileType }}</span>
                            </el-form-item>

                            <el-form-item label="储存日期">
                                <span>{{ props.row.storageDate }}</span>
                            </el-form-item>

                            <el-form-item label="上传统计">
                                <span>{{ props.row.uploadCount }}</span>
                            </el-form-item>

                            <el-form-item label="下载统计">
                                <span>{{ props.row.downloadCount }}</span>
                            </el-form-item>


                            <el-form-item label="上传日期">
                                <span>{{ props.row.createTime }}</span>
                            </el-form-item>

                        </el-form>
                    </template>
                </el-table-column>

                <el-table-column type="selection" width="55" align="center"></el-table-column>
                <el-table-column prop="orgName"   label="文件名"></el-table-column>
                <el-table-column prop="fileSizeStr" label="文件大小"></el-table-column>
                <el-table-column prop="fileType" label="文件类型"></el-table-column>
                <el-table-column prop="createTime" width="180" label="上传日期"></el-table-column>

                <el-table-column label="操作" width="180" align="center"  fixed="right">
                    <template slot-scope="scope">
                        <el-button
                                type="text"
                                icon="el-icon-edit"
                                @click="seeFile(scope.$index, scope.row)"
                        >查看</el-button>
                        <el-button
                                type="text"
                                icon="el-icon-delete"
                                class="red"
                                @click="handleDelete(scope.$index, scope.row)"
                        >删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div class="pagination">
                <el-pagination
                        background
                        layout="total, sizes, prev, pager, next, jumper"
                        :current-page="query.pageIndex"
                        :page-size="query.pageSize"
                        :total="pageTotal"
                        @current-change="handlePageChange"
                        @size-change="handleSizeChange"
                ></el-pagination>
            </div>
        </div>

        <!-- 编辑弹出框 -->
        <el-dialog :title="formTitle" :visible.sync="editVisible"   width="800px">
            <WebUpload
                    :fileNumLimit="fileNumLimit"
                    :fileSize="fileSize"
                    :chunkSize="chunkSize"
                    :uploadSuffixUrl="uploadSuffixUrl"
                    :options="options"
                    :fileListData="fileList"
            > </WebUpload>
            <span slot="footer" class="dialog-footer">
                <!--<el-button @click="editVisible = false">取 消</el-button>-->
                <el-button type="primary" @click="saveEdit">确 定</el-button>
            </span>
        </el-dialog>

        <!--图片查看-->
        <el-dialog title="图片查看" :visible.sync="showImgVisible" width="800px">
            <el-image
                    v-if="imageUrl"
                    class="avatar"npm
                    :src="imageUrl"
                    :preview-src-list="[imageUrl]"
            ></el-image>
            <span slot="footer" class="dialog-footer">
                <!--<el-button @click="editVisible = false">取 消</el-button>-->
                <el-button type="primary" @click="showImgVisible=false;imageUrl=''">关 闭</el-button>
            </span>
        </el-dialog>

        <!--Excel导出-->

    </div>
</template>

<script>
    import { getList,delData,delDatas } from '../../../api/api';
    import WebUpload from '../../common/upload/WebUpload';

    export default {
        name: 'uploadfile',
        data() {
            return {
                query: {
                    orgName: '',
                    fileType: '',
                    pageIndex: 1,
                    pageSize: 10
                },
                formTitle:"添加",
                tableData: [],
                multipleSelection: [],
                delList: [],
                editVisible: false,
                pageTotal: 0,
                form: {},
                idx: -1,
                uId:0,
                id: -1,

                loading:true,
                uploadLoading: false,
                showRemoveFile: false,

                imageUrl:"",
                showImgVisible:false,
                uploader:{},
                uploadBtnDisabled:false,
                uploadStaus:"el-icon-upload",
                fileList:[],//显示集合
                fileNumLimit:200,//文件总数
                fileSize:100*1024*1024*1024,//默认上传文件大小
                chunkSize:5*1024*1024,//默认文件片段
                uploadSuffixUrl:"http://localhost:8080/",
                options:{
                    //允许上传的文件
                    fileType:"doc,docx,pdf,xls,xlsx,ppt,pptx,gif,jpg,jpeg,bmp,png,rar,zip,mp4,avi",
                    fileUploadUrl:"/upload/fileRecord/zone/upload",//上传地址
                    fileCheckUrl:"/upload/fileRecord/zone/upload/md5Check",//检测文件是否存在url
                    checkChunkUrl:"/upload/fileRecord/zone/upload/md5Check",//检测分片url
                    mergeChunksUrl:"/upload/fileRecord/zone/upload/merge/",//合并文件请求地址
                    headers:{}
                }

            };
        },
        components:{
            WebUpload
        },
        created() {
            this.getData();
        },
        methods: {
            getData() {
                var that=this;
                this.loading=true;
                var query=this.query;
                var pageSize=query.pageSize;
                var pageIndex=query.pageIndex;
                var reqData={};

                if(query.orgName.length>0){
                    reqData.orgName=query.orgName;
                }
                if(query.fileType!=null&&query.fileType!=""){
                    reqData.fileType=query.fileType;
                }

                getList(reqData,pageIndex,pageSize).then(res=>{
                    if(res.success){
                        var resdata=res.data;
                        var rows=resdata.rows;
                        for(var i=0;i<rows.length;i++){
                            var fileSize=rows[i].fileSize;
                            rows[i].fileSizeStr=this.formatFileSize(fileSize);
                            rows[i].networkPathURL=this.uploadSuffixUrl+ rows[i].networkPath;
                        }
                        that.tableData=rows;
                        that.pageTotal = resdata.total || 50;
                    }
                    that.loading=false;
                });
            },
            // 触发搜索按钮
            handleSearch() {
                this.$set(this.query, 'pageIndex', 1);
                this.getData();
            },
            // 删除操作
            handleDelete(index, row) {
                // 二次确认删除
                this.$confirm('确定要删除吗?', '提示', {
                    type: 'warning'
                })
                .then(() => {
                    delData(row.id).then(res=>{
                        if(res.success){
                            this.$message.success(res.message);
                            // this.tableData.splice(index, 1);
                            this.getData();
                        }else{
                            this.$message.error(res.message);
                        }
                    });
                })
                .catch(() => {
                    this.$message.success("取消成功");
                });
            },
            // 多选操作
            handleSelectionChange(val) {
                this.multipleSelection = val;
            },
            addAllSelection(){//添加数据
                this.form={
                    isFilter:'1',
                    contentType:'',
                    fileSuffix:'',
                    fileType:'',
                    fileTag:'',
                    fileDescribe:''
                };
                this.formTitle="上传文件";
                this.editVisible = true;
            },
            delAllSelection() {
                const length = this.multipleSelection.length;
                let str = '';
                let ids = '';
                if(length==0){
                    this.$message.error(`请选择数据`);
                    return;
                }
                this.delList = this.delList.concat(this.multipleSelection);
                for (let i = 0; i < length; i++) {
                    str += this.multipleSelection[i].orgName + '、';
                    ids += this.multipleSelection[i].id+',';
                }
                str=str.substring(0,str.length-1);
                ids=ids.substring(0,ids.length-1);
                delDatas(ids).then(res=>{
                    if(res.success){
                        this.$message.success(`删除了【${str}】`);
                        this.multipleSelection = [];
                        this.getData();
                    }else{
                        this.$message.error(res.message);
                    }
                });

            },
            // 编辑操作
            seeFile(index, row) {
                console.log("row:",row);
                var orgName=row.orgName;
                var fSuffix=orgName.substring(orgName.lastIndexOf(".")+1);
                if(fSuffix==="png"||fSuffix==="gif"
                    ||fSuffix==="jpg"||fSuffix==="jpeg"
                    ||fSuffix==="bmp"){
                    this.showImgVisible=true;
                    this.imageUrl=this.uploadSuffixUrl+row.networkPath;
                }else if(fSuffix==="mp4"||fSuffix==="mp3"||fSuffix==="pdf"){
                    this.$confirm('需要新开窗口页面,确定需要吗?', '提示', {
                        type: 'warning',
                        confirmButtonText: '确定',
                        cancelButtonText: '取消'
                    })
                    .then(() => {
                        window.open(this.uploadSuffixUrl+row.networkPath)
                    })
                    .catch(() => {
                        this.$message.success("取消成功");
                    });
                }else{
                    this.$confirm('不支持在线查看,请[下载]后查看', '提示', {
                        type: 'warning',
                        confirmButtonText: '下载',
                        cancelButtonText: '取消'
                    })
                    .then(() => {
                        window.open(this.uploadSuffixUrl+row.networkPath);
                    })
                    .catch(() => {
                        this.$message.success("取消成功");
                    });

                }
            },
            // 保存编辑
            saveEdit(formName) {
                console.log("form:",formName);
                this.editVisible=false;
                this.getData();
                this.fileList=[];

            },
            // 分页导航
            handlePageChange(val) {
                this.$set(this.query, 'pageIndex', val);
                this.getData();
            },
            handleSizeChange(val){
                this.$set(this.query, 'pageSize', val);
                this.getData();
            },
            handleGetFile(e){
                var file=e.target.files[0];
                console.log("file:",file);
                var type=file.type;
                var fileType=type.substring(0,type.lastIndexOf("/"));
                var fileName=file.name;
                var fileSuffix=fileName.substring(fileName.lastIndexOf(".")+1);
                this.form.contentType=type;
                this.form.fileType=fileType;
                this.form.fileSuffix=fileSuffix;
                console.log("this.form:",this.form);
            },
            formatFileSize(size){
                var fileSize =0;
                if(size/1024>1024){
                    var len = size/1024/1024;
                    fileSize = len.toFixed(2) +"MB";
                }else if(size/1024/1024>1024){
                    var len = size/1024/1024;
                    fileSize = len.toFixed(2)+"GB";
                }else{
                    var len = size/1024;
                    fileSize = len.toFixed(2)+"KB";
                }
                return fileSize;
            }
        }
    };
</script>

<style scoped>
    .handle-box {
        margin-bottom: 20px;
    }

    .handle-select {
        width: 120px;
    }

    .handle-input {
        width: 200px;
        display: inline-block;
    }
    .table {
        width: 100%;
        font-size: 14px;
    }
    .red {
        color: #ff0000;
    }
    .mr10 {
        margin-right: 10px;
    }
    .table-td-thumb {
        display: block;
        margin: auto;
        width: 40px;
        height: 40px;
    }

    .table-td-thumb-from-item {
        display: block;
        max-width: 200px;
        max-height: 200px;
    }


    .avatar {
        min-width: 100px;
        min-height: 100px;
        max-width: 80%;
        max-height: 80%;
        width: auto;
        height: auto;
        display: block;
        cursor: pointer;
        border: 1px solid #eee;
    }

    .el-image__inner{
        width: auto;
        height: auto;
    }

    .demo-table-expand {
        font-size: 0;
    }
    .demo-table-expand label {
        width: 90px;
        color: #99a9bf;
    }
    .demo-table-expand .el-form-item {
        margin-right: 0;
        margin-bottom: 0;
        width: 50%;
    }

</style>

开发思路

参考后端的readme.md

 本人是一个后台开发的,前端写得不到位的地方,请多多指教
 使用过程中,遇到问题,请发邮件1573028099@qq.com或者加QQ1573028099,上班期间勿扰,谢谢
MIT License Copyright (c) 2016-2019 vue-manage-system Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

简介

使用vue+elementUI+webuploader制作大文件分片上传插件,支持断点续传,文件MD5校验,分片md5校验,第一次上传成功,第二次上传同一个文件是就是文件秒传,从而达到秒传的目的,后端地址:https://gitee.com/hhjNavy/webupload.git,插件在:src/components/common/upload/WebUpload.vue, 演示:src/components/page/sys/FileList.vue 展开 收起
JavaScript
MIT
取消

发行版

暂无发行版

贡献者

全部

近期动态

加载更多
不能加载更多了
JavaScript
1
https://gitee.com/share-net_cjqing/webupload-vue.git
git@gitee.com:share-net_cjqing/webupload-vue.git
share-net_cjqing
webupload-vue
webupload-vue
master

搜索帮助

14c37bed 8189591 565d56ea 8189591