一.前言
web端上传文件需求是很常见的，如单文件/批量上传等场景等，网络上很多资源都是针对单文件操作案例，导致部分基础较差的前端童鞋无法理解多文件批量操作。所以现将公司实际项目的完整案例记录如下
源码地址
预览
特性
- 支持vue2
- 基于
element-ui组件库el-upload - 支持分片
- 支持断点
- 批量上传
二.安装依赖
github地址：ali-oss
npm install ali-oss
# or
yarn add ali-oss
三.创建上传组件
在src目录下创建上传组建，完整目录如下：
└── compontents
├── Upload
│ └── index.vue
│ └── index.js
3.1 上传组件视图
文件路径：src/compontents/Upload/index.vue
3.1.1 封装el-upload组件
<template>
<div class="oss-upload">
<el-upload
ref="upload"
action
:show-file-list="false"
:multiple="multiple"
:on-change="handleChange"
:auto-upload="false"
:accept="accept"
>
<el-button type="primary" icon="el-icon-upload2" round>上 传</el-button>
</el-upload>
</div>
</template>
以上代码需要我们关注的部分multiple是否支持多文件属性,handleChange()文件选择改变事件,auto-upload属性，值false关闭自动上传方式，accept接受文件类型参数属性，为空时表示不限制
3.1.2 文件上传视图
<template>
<div class="oss-upload">
<!-- 此处代码为3.1.1部分的el-upload组件代码-->
<el-dialog
:visible.sync="dialogVisible"
width="650px"
destroy-on-close
:close-on-click-modal="false"
:before-close="handleClose"
>
<div slot="title">
<span>上传</span>
<span class="num">
{{ fileList.length - unList.length }}/{{ fileList.length }}
</span>
</div>
<div class="dialog-head">
<div class="head-btn">
<el-button
size="small"
type="primary"
:disabled="uploadDisabled"
icon="el-icon-video-play"
@click="startUpload"
>
开始上传
</el-button>
<el-button
class="item-btn"
size="small"
:disabled="resumeDisabled"
icon="el-icon-refresh-right"
type="success"
@click="resumeUpload"
>
继续
</el-button>
<el-button
class="item-btn"
size="small"
icon="el-icon-video-pause"
type="danger"
:disabled="pauseDisabled"
@click="stopUplosd"
>
暂停
</el-button>
</div>
</div>
</el-dialog>
</div>
</template>
以上代码我们需要关注部分为dialogVisible是否显示上传视图；close-on-click-modal是否可点击遮罩关闭上传视图；handleClose()视图关闭前的事件；fileList为文件列表参数，用于回显列表数据；unList上传未完成列表；uploadDisabled上传按钮状态；startUpload()开始上传事件；resumeDisabled恢复上传按钮状态；resumeUpload()继续上传事件；pauseDisabled；stopUplosd()暂停事件；
3.1.3 文件列表显示视图
<div class="file-list">
<div class="file-item" v-for="(item, index) in fileList" :key="index">
<div class="file-name">
<div class="name">
<span class="file-name-item">
{{ index + 1 }}.{{ item.name }}
</span>
<span class="speed" v-if="item.isLoading && !item.isPlay">
准备就绪
</span>
<span class="speed" v-if="item.isPlay && item.percentage !== 100">
{{ item.speed }}/s
</span>
<span v-if="item.percentage === 100" class="success">完成</span>
<div class="total">
{{ filterSize(item.size) }}
</div>
</div>
<span class="name error" v-if="item.errMsg">{{ item.errMsg }}</span>
<el-progress
:percentage="item.percentage"
v-if="item.percentage < 100 && !item.errMsg"
></el-progress>
<template v-else>
<el-progress
:percentage="item.percentage"
:status="item.errMsg ? 'exception' : 'success'"
></el-progress>
</template>
</div>
<div class="tool">
<span
v-if="
!item.percentage || (0 < item.percentage < 100 && !item.isPlay)
"
class="icon delete"
@click="handleDeleteChangeFile(index)"
>
<i class="el-icon-close"></i>
</span>
<span
v-if="item.percentage && item.percentage !== 100"
class="icon"
:class="item.isPlay ? 'delete' : 'success'"
@click="handleChangeFileStatus(index, item)"
>
<i
:class="`el-icon-${
item.isPlay ? 'video-pause' : 'caret-right'
}`"
></i>
</span>
</div>
</div>
</div>
以上内容需要关注的handleChangeFileStatus()改变文件上传事件；handleDeleteChangeFile删除文件事件。
3.1.4 css样式
<style lang="scss" scoped>
.file-list {
max-height: 500px;
overflow-y: auto;
overflow-x: hidden;
}
.icon-file {
width: 2.5em;
height: 2.5em;
vertical-align: -0.15em;
fill: currentColor;
overflow: hidden;
}
::v-deep {
.el-progress-circle {
width: 40px !important;
height: 40px !important;
}
}
.file-item {
display: flex;
align-content: center;
.file-name {
flex: 1;
.name {
width: 100%;
display: flex;
.total {
margin-left: 20px;
}
// justify-content: space-between;
.file-name-item {
font-weight: 500;
width: 290px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.speed {
width: 120px;
text-align: center;
font-size: 13px;
color: $base-color-default;
}
.success {
text-align: center;
width: 120px;
color: #91cc75;
}
&.error {
color: #f45;
font-size: 12px;
}
}
}
border-bottom: 1px solid #ddd;
padding: 15px 0;
&:last-child {
border-bottom: 0;
}
.tool {
margin-left: 15px;
.icon {
display: inline-flex;
justify-content: center;
align-items: center;
width: 30px;
height: 30px;
background-color: #eee;
border-radius: 5px;
margin: 0px 4px;
cursor: pointer;
font-size: 15px;
color: rgb(255, 68, 85);
font-weight: 600;
&.success {
color: #91cc75;
background-color: #eee;
}
}
}
}
.dialog-head {
display: flex;
justify-content: space-between;
}
::v-deep {
.el-progress-bar {
width: 320px !important;
}
}
.num {
background: #515256a8;
padding: 2px 8px;
border-radius: 4px;
margin-left: 5px;
color: #fff;
}
</style>
3.2 组件参数/事件处理
文件路径：src/compontents/Upload/index.js
3.2.1 props/data
export default {
props: {
// 接受上传的文件类型，默认全部
accept: {
type: String,
default: '',
},
// 是否支持多文件上传,默认支持
multiple: {
type: Boolean,
default: true,
},
// 绑定值
value: {
type: Array,
default: () => {
return []
},
},
},
data() {
return {
unList: [], // 未上传列表
fileList: [], // 文件列表
file: null, // 文件信息
uploadDisabled: true, // 上传按钮状态
resumeDisabled: true, // 恢复上传按钮状态
pauseDisabled: true, // 暂停上传按钮状态
partSize: 1024 * 1024, // 分片大小
parallel: 4, // 并发数量
checkpoints: {}, // 分片信息
credentials: null, // oss
fileMap: {},
map_max_key: 0,
}
},
3.2.2 handleChange事件处理
methods: {
/**
* @description 选择文件事件
* @param {*} file 文件信息
* @param {*} fileList 文件列表
*/
handleChange(file, fileList) {
fileList.forEach((item) => {
item.client = null // 初始化oss 为了能单独控制单文件
item.isPlay = false // 是否开始 控制开启状态
item.isLoading = false // 是否处于就绪状态
item.abortCheckpoint = false // 是否分片
})
this.fileList = fileList
this.file = file.raw
this.uploadDisabled = false // 默认开启上传状态
this.pauseDisabled = this.resumeDisabled = true // 关闭暂停恢复按钮
},
}
3.2.3 fileList监听处理
watch: {
fileList: {
handler(val) {
if (val.length) {
this.dialogVisible = true
let list = []
let unList = []
val.forEach((item) => {
// 上传进度不满足100%都存放到未完成列表，反之完成列表
if (item.percentage === 100) list.push(item)
else unList.push(item)
})
// 判断是否全部完成
if (list.length === val.length) {
this.pauseDisabled = true
}
this.unList = unList
}
},
deep: true,
},
}
3.2.4 handleClose事件处理
handleClose() {
// 关闭事件
this.$emit('on-close')
// 处理正在上传的文件逻辑代码，可根据自己的业务开发
},
3.2.5 startUpload开始上传事件
import request from '@/utils/request'
let OSS = require('ali-oss')
/**
* @description 点击上传至服务器
*/
startUpload() {
this.uploadDisabled = true
this.pauseDisabled = false
// 上传
this.multipartUpload()
},
/**
* @description 切片上传
*/
async multipartUpload() {
if (!this.file) {
this.$message.error('请选择文件')
return
}
this.fileList.forEach(async (item) => {
// 设置准备就绪状态
item.isLoading = true
// 获取oss临时凭证
const getOssRes = await this.getOss()
const { AccessKeyId, AccessKeySecret, SecurityToken } = this.credentials
// 初始化文件oss
item.client = new OSS({
accessKeyId: AccessKeyId,
accessKeySecret: AccessKeySecret,
stsToken: SecurityToken,
bucket: 'buckle-pan',
region: 'oss-cn-hangzhou',
})
if (!getOssRes.pass) {
return this.$message.error('获取oss上传凭证异常')
}
//
await this.ossUpload(item, this.fileList)
})
},
/**
* @description 获取当前日期
* @returns 返回当前日期
*/
getToday() {
const date = new Date()
return `${date.getFullYear()}${
date.getMonth() + 1
}${date.getDate()}${date.getHours()}${date.getMinutes()}${date.getSeconds()}`
},
3.2.6 获取oss临时凭证
/**
* @description 获取临时凭证
*/
async getOss() {
let res = await request({
url: '/StsToken', // 获取oss临时凭证接口，根据自己配置修改
})
let isPass = {
pass: true,
}
if (res.status === 200) {
this.credentials = res.data
} else {
isPass = { ...res, pass: false }
}
return isPass
},
3.2.7 上传至oss
/**
* @description 上传至OSS
* @param {*} item 文件信息
* @param {*} fileList
* @returns
*/
async ossUpload(item, fileList) {
let isPass = {
pass: true,
filePath: '',
}
try {
const { raw, percentage } = item
// 初始化文件大小
item.partSize = 0
// 判断上传进度是否小于100
if (percentage < 100) {
const file = raw
const time = this.getToday()
const path = time + file.name
await item.client
.multipartUpload(path, file, {
parallel: this.parallel,
partSize: this.partSize,
progress: async (p, checkpoint, res) => {
await this.onUploadProgress(item, p, checkpoint, res, path)
},
})
.then(({ res }) => {
this.$emit('input', this.fileList)
this.resumeDisabled = true
if (this.unList.length && this.uploadDisabled)
this.resumeDisabled = false
})
.catch(async (err) => {
await this.resetUpload(err, item)
})
}
} catch (e) {
//上传失败处理
isPass = {
...e,
pass: false,
filePath: '',
}
}
//上传成功返回filepath
return isPass
},
3.2.8 oss上传进度
/**
* @description 上传进度
*/
async onUploadProgress(item, p, checkpoint, res, path) {
if (checkpoint) {
this.checkpoints[checkpoint.uploadId] = checkpoint
item.speed = this.handle_network_speed(res, this.partSize, p)
item.tempCheckpoint = checkpoint
item.abortCheckpoint = checkpoint
item.upload = checkpoint.uploadId
}
// 改变上传状态
item.isPlay = true
// 改变准备就绪状态
if (item.isPlay) item.isLoading = false
item.uploadName = path
// 上传进度
item.percentage = Number((p * 100).toFixed(2))
},
3.2.9 获取上传速度
async change(i, value) {
this.fileMap[i] = value
this.map_max_key = i
},
async handle_network_speed_change(start_time, end_time, network_speed) {
// 如果超过10秒没有传输数据,则清空map
if (start_time - this.map_max_key >= 10000) {
this.fileMap = {}
}
for (let i = start_time; i <= end_time; i++) {
const value = await this.fileMap[i]
if (value) {
await change(i, value + network_speed)
} else {
await change(i, network_speed)
}
}
},
/**
* @description 获取上传的网络状态
* @param {*} res 文件信息
* @param {*} partSize 分片大小
* @param {*} p 上传进度
* @returns 网速度 network_speed
*/
handle_network_speed(res, partSize, p) {
const spend_time = res.rt / 1000 //单位s
const end_time = new Date(res.headers.date).getTime()
const start_time = end_time - spend_time
let network_speed = parseInt(partSize / spend_time) // 每s中上传的字节(b)数
if (p === 0) network_speed = 0
if (network_speed === 0) {
// nothing to do
} else {
this.handle_network_speed_change(start_time, end_time, network_speed)
}
return network_speed ? filterSize(network_speed) : 0
},
3.3.0 文件大小转换
export function filterSize(size) {
if (!size) return '-'
if (size < pow1024(1)) return size + ' B'
if (size < pow1024(2)) return (size / pow1024(1)).toFixed(2) + ' KB'
if (size < pow1024(3)) return (size / pow1024(2)).toFixed(2) + ' MB'
if (size < pow1024(4)) return (size / pow1024(3)).toFixed(2) + ' GB'
return (size / pow1024(4)).toFixed(2) + ' TB'
}
3.3.1 resumeUpload恢复上传
/**
* @description 恢复上传
*/
async resumeUpload() {
this.pauseDisabled = false
this.uploadDisabled = this.resumeDisabled = true
await this.resumeMultipartUpload()
},
/**
* @description 恢复上传
*/
async resumeMultipartUpload(item) {
// 恢复单文件
if (item) {
const { tempCheckpoint } = item
this.resumeUploadFile(item, tempCheckpoint)
} else {
// 多文件
Object.values(this.checkpoints).forEach((checkpoint) => {
const { uploadId } = checkpoint
const index = this.fileList.findIndex(
(option) => option.upload === uploadId
)
const item = this.fileList[index]
this.resumeUploadFile(item, checkpoint)
})
}
},
/**
* @description 恢复上传
* @param {*} item 文件信息
* @param {*} checkpoint 分片信息
*/
async resumeUploadFile(item, checkpoint) {
const { uploadId, file, name } = checkpoint
try {
const { raw, percentage } = item
item.partSize = 0
if (percentage < 100 && raw.name.indexOf('.') !== -1) {
item.client
.multipartUpload(uploadId, file, {
parallel: this.parallel,
partSize: this.partSize,
progress: async (p, checkpoint, res) => {
await this.onUploadProgress(item, p, checkpoint, res, name)
},
checkpoint,
})
.then((result) => {
delete this.checkpoints[checkpoint.uploadId]
this.$emit('input', this.fileList)
this.resumeDisabled = true
if (this.unList.length && this.uploadDisabled)
this.resumeDisabled = false
})
.catch(async (err) => {
await this.resetUpload(err, item)
})
}
} catch {
console.log('---err---')
}
},
3.3.2 stopUplosd暂停事件
/**
* @description 暂停分片上传
*/
stopUplosd() {
this.resumeDisabled = false
this.pauseDisabled = true
// window.removeEventListener('online', this.resumeUpload)
// let result = this.client.cancel()
this.fileList.forEach((item) => {
item.client.cancel()
item.isPlay = false
})
},
3.3.3 handleChangeFileStatus改变文件上传事件
handleStopChangeFile(index, item) {
item.isPlay = !item.isPlay
this.fileList.splice(index, 1, item)
if (!item.isPlay) item.client.cancel()
else this.resumeMultipartUpload(item)
},
3.3.4 handleDeleteChangeFile删除事件
handleDeleteChangeFile(index) {
this.fileList.splice(index, 1)
if (!this.fileList.length) this.dialogVisible = false
// 可自行开发
},
以上已全部完成上传操作
