plupload分片上传php,plUpload分片上传

主页面

:draggable="true" accept-files=".docx,.doc,.xlsx,.xls,.ppt,.pptx"

@οnchange="handleFileChange" >

多文件上传组件部分

将文件拖到此处，或 点击上传

style="margin-right: 5px;">{{ item.name }}

正在计算MD5

MD5计算完成，准备上传

上传失败

class="el-icon-circle-check">

v-if='item.status === 2 || item.status === 1 && item.percent > 0'>{{item.percent}}%

:v-if="item.status === 2 || item.status === 1 && item.percent > 0" />

上传

// 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()

}

}

}

.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;

}

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