<input type="file" multiple>
这样就可以实现多文件上传，但是此方法不兼容ie8等低版本浏览器。所以项目中我使用的是百度的WebUpload插件，此插件在ie中底层使用flash实现多文件上传。
以下代码是简单的demo，具体使用方法可依据官方文档。
<!DOCTYPE html><html><head lang="en"><meta charset="UTF-8"><title></title><link rel="stylesheet" href="webuploader.css"/></head><body><div id="uploader" class="wu-example"><!--用来存放文件信息--><div id="thelist" class="uploader-list"></div><div class="btns"><div id="picker">选择文件</div><button id="ctlBtn" class="btn btn-default">开始上传</button></div></div><script src="jquery-1.8.3.min.js"></script><script src="webuploader.js"></script><script>var uploader = WebUploader.create({// swf文件路径swf: 'Uploader.swf',// 文件接收服务端。server: 'http://webuploader.duapp.com/server/fileupload.php',// 选择文件的按钮。可选。// 内部根据当前运行是创建，可能是input元素，也可能是flash.pick: '#picker',// 不压缩image, 默认如果是jpeg，文件上传前会压缩一把再上传！resize: false,//去重duplicate: true,//限制文件大小fileSingleSizeLimit: 50000,//单位(字节B)//可上传文件的类型accept: {extensions: 'docx,doc,xls,xlsx,ppt,pptx,wps,et,txt,ole,pdf,ceb,jpg,jpeg,bmp,png,rar,zip,caj'}})// 当有文件被添加进队列的时候uploader.on( 'fileQueued', function( file ) {$("#thelist").append( '<div id="' + file.id + '" class="item">' +'<h4 class="info">' + file.name + '</h4>' +'<p class="state">等待上传...</p>' +'</div>' )})// 文件上传过程中创建进度条实时显示。uploader.on( 'uploadProgress', function( 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 + '%' )})uploader.on( 'uploadSuccess', function( file ) {$( '#'+file.id ).find('p.state').text('已上传')})uploader.on( 'uploadError', function( file ) {$( '#'+file.id ).find('p.state').text('上传出错')})uploader.on( 'uploadComplete', function( file ) {$( '#'+file.id ).find('.progress').fadeOut()})$("#ctlBtn").bind('click', function() {//向服务器端传递的参数uploader.options.formData = {"uuid": "234124"}uploader.upload()})</script></body></html>
实现一个大文件分片上传的功能，仅支持单个文件的分片逐一上传，对上传的文件没有大小限制，但上传速度没有过互联网的测验，本地测验，上传速度约等于本地文件拷贝速度，有很多弊端，但可满足基本的大文件分片上传功能。本文仅为前端vue，如需后台java，请移步我的另一篇文章：大文件分片上传的后台方法（Java）
1 HTML部分
没啥可说的，使用Element-ui的<el-upload>标签，上代码
1.1 实现文件的选择与上传（使用Element-ui的<el-upload>标签）
<template>
<div>
<el-upload
:accept="accept"
:auto-upload="auotUpload"
action=""
:multiple="multiple"
:http-request="prepareUpload"
>
</el-upload>
</div>
</template>
登录后复制
1.2 实现文件上传的一个进度条（使用Element-ui的<el-progress>标签）
<template>
<div>
<el-card style="margin-top:2pxmargin-lift:2%margin-right:2%；height:40px" >
<div style="margin-top:4pxmargin-lift:2%">
<el-row>
<el-col :span="8">
<div style="margin-top:8pxmargin-lift:2%">{{fileInfo.fileName}}</div>
</el-col>
<el-col :span="8">
<div style="margin-top:8pxmargin-lift:2%">
<el-progress :percentage="percentage" type="line" :text-inside="true" :stroke-width="strokeWidth" :status="status"/>
</div>
</el-col>
<el-col :span="3">
<div style="margin-top:8pxmargin-lift:2%">{{fileInfo.fileName}}/{{fileInfo.allNum}}Mb</div>
</el-col>
<el-col :span="5">
<el-button type="text" @click="usable=1">暂停</div>
<el-button type="text" @click="prepareUpload(0)">继续</div>
</el-col>
</el-row>
</div>
</el-card>
</div>
</template>
登录后复制
2 JavaScript部分
2.1 参数部分
data(){
return:{
//文件参数
fileInfo:{
md:"", //文件唯一标识码，类似MD5，如果拥有MD5技术可以替换为MD5
allNum:"", //文件分片后的全部分片数量
successNum:"", //上传成功的分片文件数量
fileName:"", //文件名
detail:"", //文件描述
path:"", //文件存储路径
type:0, //文件状态，0为未上传完成，1为上传完成，用于查询时是否展示
parentId:"", //文件类型的父类，用于查询时是否展示
fileTypeId:"" //文件类型，用于查询时是否展示
}，
SIZE:1024*1024, //控制单个分片文件的大小
//以下为`el-upload`标签使用的参数
accept:"", //控制默认选择的文件类型
autoUpload:true, //是否在选择文件后自动开始上传文件
uploadURL:"", //文件上传地址这里为空，因为不需要使用这个参数，但是必须有
baseURL:"", //文件上传地址的根地址，后边方法中会拼接完成完整的地址，根地址一般为：http：//127.0.0.1:8080/demo/......
limit:1, //支持同时上传的文件数量
multiple:false, //是否支持文件多选
showFileList:false, //是否显示文件列表
file:"", //上传文件列表
//以下为进度条组件所用参数
strokeEidth:12, //进度条的高度
percentage:0, //进度条百分比
sataus:"exception", //进度条状态
//以下用于控制文件上传功能是否开启
usable=1
}
}
登录后复制
2.2 方法部分
2.2.1 开始上传之前的验证方法
prepareUpload(params){ //准备开始上传
//这里检查是否有文件正在上传，如果上传开始，则usable会被修改为0
if(this.usable===0){return this.$message({message:"当前正在执行文件上传任务，请在当前任务结束后再启动次功能",type="warning"})}
let file=params.file
//这里判断该方法是通过哪里调用的，
//如果是通过选择文件调用，则params!==0，则将文件保存到this.file
//如果是通过继续按钮调用，则params===0，则取用this.file继续执行文件上传
if(params===0){
//这里判断一下是否真的有文件在上传，如果没有，则退出任务
if(this.file===""){return this.$message({message:"当前暂无任务，无法继续",type="warning"})}
file=this.file
this.$message({message:"文件开始继续上传",type="success"})
}else{
file=params.file
this.file=params.file
}
//这里验证文件类型，可以根据自己需要进行验证，这里验证是否为zip或rar文件，如果不是则不允许上传
if(!(file.name.substring(file.name.length-4)===".zip"||!(file.name.substring(file.name.length-4)===".rar"){
return this.$message({message:"请选择zip或rar文件",type="warning"})
}
//这里验证文件大小，可自行修改限制
if(file.size>1024*1024*1024*3){return this.$message({message:"您无法选择一个大于3GB的文件",type="warning"})}
if(file.size<=0){return this.$message({message:"您无法选择一个大于大小为0的文件",type="warning"})}
//开始执行文件上传的前置 *** 作，将usable修改为0
this.usable=0
//修改文件名，用于文件下载时的为文件重命名后带有文件后缀，避免文件无法打开问题
if(this.fileInfo.fileName===""){
this.fileInfo.fileName=file.name
}else{
const a=this.fileInfo.fileName.substring(this.fileInfo.fileName.length-3)
if(!(this.fileInfo.fileName.substring(this.fileInfo.fileName.length-3)===".7z"||
this.fileInfo.fileName.substring(this.fileInfo.fileName.length-3)==="zip"||
this.fileInfo.fileName.substring(this.fileInfo.fileName.length-3)==="rar"||)
){
if(fileName.substring(file.name.length-3)===".7z"){
this.fileInfo.fileName+=file.name.substring(file.name.length-3)
}else{
this.fileInfo.fileName+=file.name.substring(file.name.length-4)
}
}
this.getMD5(file) //自己写的一个简易版计算文件唯一标识码，具体介绍在方法中有
this.getFileChunk(file) //获取文件分片集合，用于逐一上传
//这里写一个请求，用于判断文件是否已经上传，判断文件的状态是否已经上传完成
//这里请求方法请使用自己的，我是自己封装的请求方法
el.post("请求地址"，this.fileInfo).then((result)=>result.json()).then((result)=>{
this.getResult(result) //因为很多地方需要写同样的内容，就封装了一个方法来将返回值存储起来
//判断一下文件状态，如果为1则表示服务器中存在与该文件相同的文件，则无需再次上传，执行秒传,否则继续执行
if(result.result.type===1){
//执行秒传时需要对数据库进行写入新文件名的 *** 作，所以还需要一个请求来完成
el.post("请求地址"，this.fileInfo).then((result)=>result.json()).then((result)=>{
if(result.result.type===1){return this.$message({message:"秒传成功"，type:"success"})
}
}else{
this.beforeUpload() //如果文件没有秒传则调用上传之前的方法
}
}
}
登录后复制
2.2.2 开始上传文件
开始上传之前
beforeUpload(){
//循环调用该方法，实现对fileList的逐一上传，该方法主要为避免vue的异步执行导致逻辑错误
//实现方式为通过成功上传次数与总分片数量比较判断何时return
//成功上传次数为后台返回，所以js无需做次数递增，判断依据为this.fileInfo.successNum
this.beginUpload() //调用开始文件上传方法
}
登录后复制
开始上传文件
beginUpload(){
//判断用户是否 *** 作了暂停按钮，如果是则终止任务
if(this.usable===1){return this.$message({message:"任务已暂停",type:"success"})}
//创建请求头
const headers=new Headers({'Csrf-Token':wind
解决方法如下：1、打开IE浏览器，找到IE的Internet选项菜单，开启菜单栏的根据下列方面找。
2、但是有些IE的工具栏关闭了，查找Internet选项。
3、找到Internet选项后，点击，选择安全选项卡，并点击”自定义级别“。
4、找到“将文件上载到服务器时包含本地目录路径”选择“启用”。然后点击确定关闭IE，重启打开。
5、更新浏览器的flash版本。搜索”flash player“即可找到，的“Adobe Flash Player系统插件”。
6、点击后，浏览器会自动跳转到下载选择界面，在界面中取消可选程序，然后点击“立即安装”。
7、安装完成后，重启浏览器即可。此时再去点击上传按钮，发现可以找到本地的文件，并且可以上传了。
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）