文件上传(插件版)

项目需求实现1G以上文件的全局上传功能,需具备分片上传、秒传和断点续传。采用vue-simple-uploader插件,将上传组件封装在组件A中,并在App.vue中注册为全局组件,确保页面切换时上传不中断。解决方案参考自夏大师的博客文章。
摘要由CSDN通过智能技术生成

问题描述:项目里需要上传1G以上的iso文件,而且要做成全局组件,切换各个页面的时候,上传界面还在并且上传不会受到影响,实现分片上传、秒传以及断点续传的功能,所以使用了vue-simple-uploader插件
解决方法:
组件A封装上传文件

<template>
    <div id="global-uploader">

        <!-- 上传 -->
        <uploader
                ref="uploader"
                :options="options"
                :autoStart="false"
                @file-added="onFileAdded"
                @file-success="onFileSuccess"
                @file-error="onFileError"
                class="uploader-app">
            <uploader-unsupport></uploader-unsupport>

            <uploader-btn id="global-uploader-btn"  ref="uploadBtn" :attrs="attrs">选择文件</uploader-btn>

            <uploader-list v-show="panelShow">
                 <div class="file-panel" slot-scope="props" >
                    <div class="file-title">
                        <h2 style="color:red">文件列表</h2>
                        <div class="operate">
                            <el-button @click="foldShow" type="text" title="折叠">
                                <i class="el-icon-minus" ></i>
                            </el-button>
                            <el-button @click="unfoldShow" type="text" title="展开">
                                <i class="el-icon-reading" ></i>
                            </el-button>
                            <el-button @click="close" type="text" title="关闭">
                                <i class="el-icon-close"></i>
                            </el-button>
                        </div>
                    </div>

                    <ul class="file-list"  v-show="block" ref='fileList'>
                        <li v-for="file in props.fileList" :key="file.id">
                            <uploader-file :class="'file_' + file.id" ref="files" :file="file" :list="true" ></uploader-file>
                        </li>
                        <div class="no-file" v-if="!props.fileList.length"><i class="iconfont icon-empt
  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
新颖网络上传插件(StorageWebPlug)是一个支持超大文件(2GB,可扩展)上传的COM控件, 具备断点续传,文件MD5验证,大大提高上传效率、节省带宽,有详细的上传进度显示,支持多种脚本语言,欢迎下载体验。免费提供JavaScript SDK包。 产品特点: 1、文件上传使用增强的FTP协议,用户使用浏览器就可以上传超大文件到服务器(支持上传超过1G的文件)。 2、支持断点续传,系统智能续传未上传的文件,续传操作更简单,更方便,更快捷。 3、支持文件批量上传, 一次可以上传多个文件. 上传时有详细的状态显示(包括单个文件进度,整体进度,传输速率,剩余时间等)。 4、新颖网络免费提供JavaScript SDK包。通过新颖网络提供的封装好的JavaScript类库用户可以快速的与现有系统整合。 5、StorageWebPlug提供完善的接口和帮助文档,开发文档。开发人员可以动态设置上传保存路径, 设置允许扩展名, 允许最大大小等,可自定义强。 6、支持各种代理(HTTP, Socket4, Socket5等)。 7、组件采用多线程机制来保证上传效率。 8、支持批量文件上传, 用户可以一次性上传批量文件. 客户端可以绑定HTML表单变量, 服务端并可以接收表单变量 9、服务端文件保存路径可以随意指定,服务端文件保存路径可以灵活变化。保存路径支持网络路径。 10、为提高安全性,服务端组件可以指定用户权限 11、可以限制上传单个文件大小, 控制上传带宽上限, 允许文件扩展名, 拒绝文件扩展名等 12、上传数据时会根据网络状况来控制数据包大小, 避免网络堵塞 13、控件采用ATL编写, cab包只有59KB, 用56k的modem下载不会超过12秒 14、服务端支持Windows 2000 Server/Windows 2003 Server/Windows NT/Windows XP/Unix/Linux等操作系统 15、通过新颖网络业界领先的设计水平打造的操作界面可以帮助您的系统和产品获得更高的品质。 产品介绍:http://www.ncmem.com/service_storagewebplug.aspx 下载地址:http://www.ncmem.com/download.aspx
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值