主页面
<pl-upload ref='plupload' :api-url='apiUrl' :file-list="fileList" :limit="1" biz-type="trainModule"
:draggable="true" accept-files=".docx,.doc,.xlsx,.xls,.ppt,.pptx"
@onchange="handleFileChange" >
</pl-upload>
多文件上传组件部分
<template>
<div class="upgradeUpload">
<div class="el-upload-dragger" id='browseButton'><i class="el-icon-upload"></i>
<div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
</div>
<div v-if='fileRawList.length' class="upload-item">
<div v-for='(item,index) in fileRawList' :key='index'>
<div class="upload-status">
<span class="overtext" style="width: 185px;"><i class="el-icon-document"
style="margin-right: 5px;"></i>{{ item.name }}</span>
<div class="warning-text">
<span class="item" v-if="item.status === -1">正在计算MD5</span>
<span class="item" v-if="item.status === 1 && item.percent === 0">MD5计算完成，准备上传</span>
<span class="item" v-if="item.status === 4" style="color: brown">
上传失败
</span>
<span class="item" v-if="item.status === 5" style="color: chartreuse"><i
class="el-icon-circle-check"></i></span>
<span class="item"
v-if='item.status === 2 || item.status === 1 && item.percent > 0'>{{item.percent}}%</span>
<i class="el-icon-close close-icon" @click="deleteFile(item)"></i>
</div>
</div>
<div class="progress">
<el-progress v-if="item.percent || item.percent === 0" :stroke-width="2" :percentage="item.percent"
:v-if="item.status === 2 || item.status === 1 && item.percent > 0" />
</div>
</div>
<!-- <div @click='uploadStart'>上传</div> -->
<div style=" margin-top: 20px;">
<el-button type='primary' @click='uploadStart' size='mini'>上传</el-button>
</div>
</div>
</div>
</template>
<script>
// plupload参数文档：http://www.phpin.net/tools/plupload/
import FileMd5 from '@/factory/file-md5.js'
export default {
name: 'Plupload',
head() {
return {
title: '多文件分片上传'
}
},
props: {
// 文件上传类型限制
acceptFiles: {
type: String,
default: '.png,.jpg,.bmp,.doc,.docx,.xls,.xlsx,.pdf,.rar,.zip'
},
bizType: {
type: String,
default: ''
},
fileList: {
type: Array,
default: () => []
},
limit: {
type: Number,
default: 5
}
},
data() {
return {
up: {},
basicForm: {},
fileRawList: [],
uploading: false
}
},
watch: {
up(val) {
this.fileRawList = this.fileList.concat(val.files)
},
acceptFiles(val) {
this.up.refresh()
}
},
mounted() {
this.pluploadInit()
},
methods: {
pluploadInit() {
var that = this
var uploader = new this.$plupload.Uploader({
browse_button: 'browseButton',
drop_element: 'browseButton',
url: 'https://httpbin.org/post',
// url: 'http://192.168.8.132:80/jaz/upload',
chunk_size: '10MB',
// headers: that.headers,
multipart: true, // 为true时将以multipart/form-data
auto_start: true,
max_retries: 0, // 当发生plupload.HTTP_ERROR错误时的重试次数，为0时表示不重试
multi_selection: false, // 是否可以在文件浏览对话框中选择多个文件
filters: {
mime_types: [
{ extensions: that.acceptFiles.replace(/\./g, '') }
],
prevent_duplicates: false, // 不允许选取重复文件
max_file_size: '1024mb' // 最大只能上传400kb的文件
},
init: {
BeforeUpload(up, file) {
console.log('1')
// 上传时的附加参数，以键/值对的形式传入
up.setOption('multipart_params', {
'size': file.size,
'md5': file.md5,
'bizType': that.bizType
})
},
FileFiltered(up, files) {
console.log(files, '2')
// up.start()
},
FilesAdded(up, files) {
that.fileRawList.push(...files)
if (that.fileRawList.length > that.limit) {
that.deleteFile(that.fileRawList[0])
}
files.forEach((f) => {
f.status = -1
FileMd5(f.getNative(), (e, md5) => {
f['md5'] = md5
f.status = 1
})
})
},
FilesRemoved(upp, files) {
that.uploading = false
},
FileUploaded(up, file, info) {
if (info.status === 200) {
console.log('FileUploaded', info, file, up)
const { path } = JSON.parse(info.response).data
file.url = path
that.up.refresh()
that.$emit('onChange', that.fileRawList)
}
},
UploadComplete(up, files) {
that.uploading = false
},
Error(up, args) {
that.$message({
type: 'error',
message: args.message
})
that.uploading = false
}
}
})
uploader.init()
this.up = uploader
// 自动上传
// uploader.bind('FilesAdded', this.uploadStart)
},
deleteFile(row) {
this.fileRawList.splice(this.fileRawList.indexOf(row), 1)
var file = this.up.getFile(row.id)
file && this.up.removeFile(file)
// 删除接口
// row.url && removeFile({ filePath: row.url }).then(res => {
// if (res.success) {
// this.$emit('onChange', this.fileRawList.filter(item => {
// return item.url
// }))
// return
// }
// this.$message.warning('删除文件出现异常，请与管理员联系!')
// })
},
uploadStart() {
console.log('上传')
this.uploading = true
this.up.start()
}
}
}
</script>
<style>
.upgradeUpload {
width: 500px;
height: 100%;
margin: 100px auto;
}
.upload-item {
width: 370px;
height: 25px;
line-height: 25px;
}
.upload-status {
display: flex;
justify-content: space-between;
font-size: 14px;
color: #606266;
margin-top: 10px;
padding: 0px 6px;
border-radius: 4px;
}
.progress {
position: relative;
}
.el-progress__text {
display: none !important;
}
.warning-text {}
.close-icon {
display: none;
line-height: 25px;
}
.upload-status:hover {
background-color: #F5F7FA;
}
.upload-status:hover .close-icon {
display: block;
}
.upload-status:hover .item {
display: none;
}
.el-progress-bar {
padding-right: 0 !important;
margin-right: 0 !important;
}
</style>
file-md5.js
'use strict'
import SparkMD5 from 'spark-md5'
export default function (file, callback) {
console.log(file.size, '分片处理')
var blobSlice = File.prototype.slice || File.prototype.mozSlice || File.prototype.webkitSlice
var chunkSize = 10485760 // Read in chunks of 2MB
var chunks = Math.ceil(file.size / chunkSize)
var currentChunk = 0
var spark = new SparkMD5.ArrayBuffer()
var fileReader = new FileReader()
fileReader.onload = function (e) {
console.log('read chunk nr', currentChunk + 1, 'of', chunks)
spark.append(e.target.result) // Append array buffer
currentChunk++
if (currentChunk < chunks) {
loadNext()
} else {
callback(null, spark.end())
console.log('finished loading')
}
}
fileReader.onerror = function () {
callback('oops, something went wrong.')
}
function loadNext() {
var start = currentChunk * chunkSize
var end = ((start + chunkSize) >= file.size) ? file.size : start + chunkSize
fileReader.readAsArrayBuffer(blobSlice.call(file, start, end))
}
loadNext()
}
效果图
分片上传.png
