vue2中基于vue-simple-upload实现文件分片上传组件功能
本文最主要参考的是这一篇，后端也是用django来完成。
大文件上传(秒传/断点续传)_使用Vue-Simple-Uploader插件 --Vue/Django完整实现 https://www.jb51.net/article/206178.htm
参考的代码地址：https://github.com/ClearlightY/FileUpload
vue-simple-upload文档：https://github.com/simple-uploader/Uploader
<template>
<div id='global-uploader'>
<uploader
ref='uploader'
:options='options'
:autoStart='false'
:file-status-text='statusText'
@file-added='onFileAdded'
@file-success='onFileSuccess'
@file-progress='onFileProgress'
@file-error='onFileError'
@file-removed='onfileRemoved'
class='uploader-app'
>
<uploader-unsupport></uploader-unsupport>
<!-- 文件拖拽上传区域-->
<uploader-drop id='global-uploader-drop'>
<uploader-btn id='global-uploader-btn' :attrs='attrs' ref='uploadBtn'>
<div class='hzs-upload-icon'>
<svg viewBox='0 0 1024 1024' data-icon='inbox' width='1em' height='1em' fill='currentColor'
aria-hidden='true'
focusable='false' class=''>
<path
d='M885.2 446.3l-.2-.8-112.2-285.1c-5-16.1-19.9-27.2-36.8-27.2H281.2c-17 0-32.1 11.3-36.9 27.6L139.4 443l-.3.7-.2.8c-1.3 4.9-1.7 9.9-1 14.8-.1 1.6-.2 3.2-.2 4.8V830a60.9 60.9 0 0 0 60.8 60.8h627.2c33.5 0 60.8-27.3 60.9-60.8V464.1c0-1.3 0-2.6-.1-3.7.4-4.9 0-9.6-1.3-14.1zm-295.8-43l-.3 15.7c-.8 44.9-31.8 75.1-77.1 75.1-22.1 0-41.1-7.1-54.8-20.6S436 441.2 435.6 419l-.3-15.7H229.5L309 210h399.2l81.7 193.3H589.4zm-375 76.8h157.3c24.3 57.1 76 90.8 140.4 90.8 33.7 0 65-9.4 90.3-27.2 22.2-15.6 39.5-37.4 50.7-63.6h156.5V814H214.4V480.1z'></path>
</svg>
</div>
<p class='hzs-upload-title'>Click or drag file(.zip) to this area to upload datasets</p>
<p class='hzs-upload-description'>Just support for a single file, multiple uploads will be overwritten by the
latter.</p>
</uploader-btn>
</uploader-drop>
<!--文件列表-->
<uploader-list>
<div class='file-panel' slot-scope='props'>
<ul class='file-list' 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>
<!-- <!– 不重要的–>-->
<!-- <div class='query_check' v-if='queryBtnShow'>-->
<!-- <button @click='queryCheck(uuid)'>校验查询</button>-->
<!-- <!– <input type="button" v-on="queryCheck(uuid)" value="校"/> –>-->
<!-- <!– <div v-if="queryCheckStatus">文件正在上传中</div> –>-->
<!-- <span class='queryCheckShow' v-if='queryCheckShow'>{{ checkStatus }}</span>-->
<!-- </div>-->
<!-- <div class='save-result' v-if='saveBtnShow'>-->
<!-- <button @click='download_check_result(file_path)'>校验保存</button>-->
<!-- </div>-->
</li>
<div class='no-file' v-if='!props.fileList.length'>
Empty
</div>
</ul>
</div>
</uploader-list>
</uploader>
</div>
</template>
<script>
import SparkMD5 from 'spark-md5'
import { ACCEPT_FILE_CONFIG } from '@/config/defaultSettings'
import { checkResult, isFileExist, mergeFile, textCheck } from '@/api/uploadTool'
// import storage from 'store'
// https://github.com/simple-uploader/Uploader#events
export default {
data() {
return {
options: {
target: '/api/upload/upload/', // 目标上传URL
testChunks: true,
chunkSize: '2048000',
// chunkSize: "10240000", // 分块时按该值来分
fileParameterName: 'file', // 上传文件时文件的参数名
maxChunkRetries: 3, // 最大自动失败重试上传次数
// 由于我自身业务原因, 添加了校验查询功能, 查询的时候不能控制
// 对应上传文件的id, 因此,去掉了多文件上传
// 这里注释掉, 就可以实现多文件上传了
// singleFile: true, // 单文件上传
// 上传分片前, 会先向后端发送一个get请求, 该函数就是响应这个get请求
checkChunkUploadedByResponse: function(chunk, message) {
console.log('上传分片前, 会先向后端发送一个get请求, 该函数就是响应这个get请求')
console.log(chunk)
console.log(message)
let objMessage = JSON.parse(message)
console.log('objMessage:', objMessage)
//---------秒传说明------------
// 此处解开注释, 配合后端传来的参数可以实现秒传, 我因为上传后还需要进行校验请求,
// 这里我就砍掉秒传功能了..
//-----------------------------
// 此处根据返回值来判断是否为秒传
// if (objMessage.skipUpload === "true") {
// return true;
// }
// 根据返回的数组内容来判断哪些分片不需要重新上传
return (objMessage.uploaded || []).indexOf(chunk.offset + 1) >= 0
},
parseTimeRemaining: function(timeRemaining, parsedTimeRemaining) {
return parsedTimeRemaining
.replace(/\syears?/, 'years')
.replace(/\days?/, 'days')
.replace(/\shours?/, 'hours')
.replace(/\sminutes?/, 'minutes')
.replace(/\sseconds?/, 'seconds')
}
},
attrs: {
accept: ACCEPT_FILE_CONFIG.getAll()
},
statusText: {
success: 'success',
error: 'network error',
uploading: 'uploading',
typeError: 'typeError',
emptyError: 'emptyError',
paused: 'paused',
waiting: 'waiting',
cmd5: 'calculate md5',
merging: 'merging'
},
fileStatusText: (status, response) => {
return this.statusText[status]
},
saveBtnShow: false,
queryBtnShow: true,
queryCheckShow: false,
// queryCheckStatus: false,
checkStatus: 'checking...',
uuid: '',
file_path: ''
}
},
mounted() {
// this.$bus.$on('openUploader', query => {
// this.params = query || {}
// if (this.$refs.uploadBtn) {
// document.querySelector('#global-uploader-btn').click()
// }
// })
},
computed: {
//Uploader实例
uploader() {
return this.$refs.uploader.uploader
}
},
methods: {
onFileAdded(file, event) {
console.log(file)
console.log(event)
console.log(this.uploader.fileList)
console.log(this.uploader.files)
this.$emit('canGoToNextStep', false)
this.$emit('canGoToPreStep', false)
// console.log(this.uploader.files.length)
//暂停文件上传
file.pause()
//
// this.panelShow = true;
this.queryCheckShow = false
this.saveBtnShow = false
this.queryBtnShow = false
this.statusSet(file.id, 'md5')
this.computedMD5(file)
// setTimeout(() => {
// this.computedMD5(file)
// }, 5000)
// Bus.$emit("fileAdded");
// console.log(this.uploader.files)
// console.log(this.uploader.files.length)
},
onFileProgress(rootFile, file, chunk) {
console.log(
`uploading ${file.name}，chunk：${chunk.startByte /
1024 /
1024} ~ ${chunk.endByte / 1024 / 1024}`
)
},
async onFileSuccess(rootFile, file, response, chunk) {
console.log('onFileSuccess')
console.log(file)
let res = JSON.parse(response)
file.success = true
// 文件完成上传, 文件合并的标志
if (res.needMerge === 'true') {
this.statusSet(file.id, 'merging')
let formData = new FormData()
formData.append('filename', file.name)
formData.append('identifier', arguments[0].uniqueIdentifier)
formData.append('totalSize', file.size)
formData.append('timeStamp', res.timeStamp)
console.log('formData')
try {
// --------------------发送合并请求 start ---------------------
let res = await mergeFile(formData)
// 合并失败的处理
// if (res.code !== 200) {
// this.$notification.error({
// message: 'Error',
// description: 'An error occurred during the inspection, please try again'
// })
// file.cancel()
// return
// }
// 文件上传成功 ui更新
this.statusRemove(file.id)
this.statusSet(file.id, 'success')
// this.queryBtnShow = true
// this.$bus.$emit('fileSuccess')
// --------------------发送合并请求 end ---------------------
// ---------------------发送请求 询问是否校验成功 start---------------
// let formData2 = new FormData()
// formData2.append('fpath', res.filePath)
// formData2.append('fname', res.fileName)
// let res2 = await textCheck(formData2)
// if (res2.code !== 200) {
// this.$notification.error({
// message: 'Error',
// description: 'An error occurred during the inspection, please try again'
// })
// file.cancel()
// }
// this.uuid = res2.uuid
// this.file_path = res2.file_path
// ---------------------发送请求 询问是否校验成功 end---------------
// this.statusRemove(file.id)
// this.statusSet(file.id, 'finish checking')
// 收集文件相关数据
console.log(file)
this.$store.commit('ADD_FILE_LIST', file)
// 提示可以到下一步了
this.$notification.success({
message: 'Success',
description: 'Successfully upload, go to next step to finish.'
})
this.$emit('canGoToNextStep', true)
this.$emit('canGoToPreStep', true)
// file.uniqueIdentifier
// this.statusSet(file.id, "checking");
//
// // -------------------定时发送请求,看检验是否完成 start-------------------
// // 定时发送请求,看检验是否完成
// let interval = setInterval(() => {
// setTimeout(async () => {
// let formData3 = new FormData()
// formData3.append('file_uuid', res2.uuid)
//
// let res3 = await checkResult(formData3)
// console.log('校验中,请稍等...')
// if (res3.code == 200) {
// console.log('校验完成')
// clearInterval(interval)
// // this.statusRemove(file.id);
// // this.statusSet(file.id, "checkSuccess");
// this.checkStatus = 'finish checking'
// this.saveBtnShow = true
// }
// }, 0)
// }, 1000)
//
// // -------------------定时发送请求,看检验是否完成 end-------------------
} catch (e) {
this.$notification.error({
message: 'Error',
description: 'An error occurred during the inspection, please try again'
})
file.cancel()
}
}
},
onFileError(rootFile, file, response, chunk) {
this.$notification.error({
message: 'Error',
description: 'Please try again'
})
},
onfileRemoved(file) {
this.$message.info(`${file.name} 's upload had been canceled`)
},
/**
* 计算上传文件的md5, 实现断点续传和秒传
*/
computedMD5(file) {
let fileReader = new FileReader()
let time = new Date().getTime()
let blobSlice =
File.prototype.slice ||
File.prototype.mozSlice ||
File.prototype.webkitSlice
let currentChunk = 0
const chunkSize = 10 * 1024 * 1000
let chunks = Math.ceil(file.size / chunkSize)
let spark = new SparkMD5.ArrayBuffer()
// this.statusSet(file.id, 'md5')
// $('.uploader-file-action').css('display', 'none');
loadNext()
fileReader.onload = e => {
spark.append(e.target.result)
currentChunk++
if (currentChunk < chunks) {
// console.log(
// `第${currentChunk}分片解析完成, 开始第${currentChunk +
// 1} / ${chunks}分片解析`
// )
loadNext()
// 实时展示MD5的计算进度
setTimeout(() => {
document.querySelector(`.myStatus_${file.id}`).textContent = 'verify MD5 ' + ((currentChunk / chunks) * 100).toFixed(0) + '%'
// console.log(file.id)
// console.log('校验MD5 ' + ((currentChunk / chunks) * 100).toFixed(0) + '%')
// console.log(document.querySelector(`.myStatus_${file.id}`))
// document.querySelector(`.myStatus_${file.id}`).textContent = '校验MD5 ' + ((currentChunk / chunks) * 100).toFixed(0) + '%'
}, 20)
} else {
let md5 = spark.end()
this.computeMD5Success(md5, file)
spark.destroy() // 释放缓存
console.log(
`MD5计算完毕：${file.name} \nMD5：${md5} \n分片：${chunks} 大小:${
file.size
} 用时：${new Date().getTime() - time} ms`
)
}
}
fileReader.onerror = function() {
this.error(`文件${file.name}读取出错，请检查该文件`)
file.cancel()
}
function loadNext() {
let start = currentChunk * chunkSize
let end =
start + chunkSize >= file.size ? file.size : start + chunkSize
fileReader.readAsArrayBuffer(blobSlice.call(file.file, start, end))
}
},
// 计算md5成功
async computeMD5Success(md5, file) {
file.uniqueIdentifier = md5 // 将文件md5赋值给文件唯一标识
this.statusRemove(file.id)
// file.resume()
console.log('computeMD5Success')
console.log(file)
// 把md5校验结果传到后端 检查是否存在这个文件
let that = this
try {
let res = await isFileExist({
md5,
fileName: file.name
})
if (res.status) {
// 文件未在s3存在的情况
if (res['is_exist'] === false) {
this.$confirm({
title: 'Are you sure to upload it?',
content: h => res.message,
okText: 'yes',
onOk() {
// 开始文件上传的一个动作
// 将表单里的是否强制上传设置为false
file['is_force_process'] = false
file.resume()
},
onCancel() {
that.$emit('canGoToPreStep', true)
file.cancel()
}
})
} else {
// 是否需要强制上传
this.$confirm({
title: 'The file had existed, are you sure to recover it?',
content: h => res.message,
okText: 'yes',
onOk() {
// 开始文件上传的一个动作
// 将表单里的是否强制上传设置为false
file['is_force_process'] = true
file.resume()
},
onCancel() {
that.$emit('canGoToPreStep', true)
file.cancel()
}
})
}
} else {
file.cancel()
}
} catch (e) {
file.cancel()
}
},
// 展示文件列表
// fileListShow() {
// // let $list = $('#global-uploader .file-list')
// let $list = this.$refs.fileList
//
// if ($list.is(':visible')) {
// $list.slideUp()
// } else {
// $list.slideDown()
// }
// },
close() {
this.uploader.cancel()
},
/**
* 新增的自定义的状态: 'md5'、'transcoding'、'failed'
* @param id
* @param status
*/
statusSet(id, status) {
let statusMap = {
md5: {
text: 'verify MD5',
bgc: '#fff'
},
merging: {
text: 'merging',
bgc: '#e2eeff'
},
transcoding: {
text: 'transcoding',
bgc: '#e2eeff'
},
failed: {
text: 'fail to upload',
bgc: '#e2eeff'
},
success: {
text: 'successfully upload',
bgc: '#e2eeff'
},
checking: {
text: 'checking',
bgc: '#e2eeff'
},
checkSuccess: {
text: 'check ok',
bgc: '#e2eeff'
}
}
setTimeout(() => {
let p = document.createElement('p')
p.className = `myStatus_${id}`
let father = document.querySelector(`.file_${id} .uploader-file-status`)
p.setAttribute('style', `position: absolute; top:-16px;left: 0;right: 0; bottom: 0;zIndex: 1; backgroundColor: ${statusMap[status].bgc}`)
p.append(statusMap[status].text)
father.appendChild(p)
})
},
statusRemove(id) {
// console.log("statusRemove")
// console.log(id)
this.$nextTick(() => {
let node = document.querySelector(`.myStatus_${id}`)
node.parentNode.removeChild(node)
})
},
error(msg) {
this.$notification.error({
message: 'Error',
description: msg
})
},
// 查询每个区块
queryCheck: function(uuid) {
console.log('uuid::', uuid)
console.log('file_path::--------', this.file_path)
// if (uuid === "") {
// this.queryCheckStatus = true;
// return;
// }
let formData = new FormData()
formData.append('file_uuid', uuid)
const instance = this.$http.post({
headers: {
'Content-Type': 'multipart/form-data'
}
})
instance
.post('http://127.0.0.1:8000/fileUpload/check_result', formData)
.then(res => {
// console.log("点击了查询校验状态按钮");
if (res.data.code == '200') {
// this.queryCheckStatus = false;
this.checkStatus = 'check ok'
this.queryCheckShow = true
} else {
this.checkStatus = 'checking...'
this.queryCheckShow = true
}
})
},
// 下载校验结果
download_check_result() {
let formData = new FormData()
formData.append('file_path', this.file_path)
const instance = this.$axios.create({
headers: {
'Content-Type': 'multipart/form-data'
},
responseType: 'blob'
})
instance
.post('http://127.0.0.1:8000/fileUpload/file_download', formData)
.then(response => {
if (!response) {
return
}
let url = window.URL.createObjectURL(new Blob([response.data]))
let link = document.createElement('a')
link.style.display = 'none'
link.href = url
link.setAttribute('download', 'check-result.txt')
document.body.appendChild(link)
link.click()
})
}
},
watch: {},
destroyed() {
// this.$bus.$off('openUploader')
}
}
</script>
<style scoped lang='less'>
#global-uploader {
// position: fixed;
z-index: 20;
max-width: 1000px;
margin: 10px auto;
background: #fff;
box-shadow: 0 0 10px rgba(0, 0, 0, 4);
//padding: 10px;
h2 {
padding: 30px 0;
text-align: center;
font-size: 20px;
}
.uploader-app {
//width: 880px;
//padding: 15px;
//margin: 20px auto 0;
font-size: 14px;
}
ul li {
list-style-type: none;
}
li div {
//left: -19px;
}
}
.file-panel {
background-color: #fff;
border: 1px solid #e2e2e2;
border-radius: 7px 7px 0 0;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
.file-title {
display: flex;
height: 40px;
// line-height: 40px;
padding: 0 15px;
border-bottom: 1px solid #ddd;
.operate {
flex: 1;
text-align: right;
}
}
.file-list {
position: relative;
height: 240px;
overflow-x: hidden;
overflow-y: auto;
background-color: #fff;
//border: 1px solid black;
padding: 0;
> li {
background-color: #fff;
}
}
&.collapse {
.file-title {
background-color: #e7ecf2;
}
}
}
.no-file {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 16px;
}
.uploader-btn {
margin-right: 4px;
color: #fff;
padding: 6px 16px;
}
#global-uploader-btn {
//border: 1px solid #409eff;
//background: #409eff;
border: 0;
width: 100%;
//height: 100px;
padding: 15px;
color: #F5222D;
display: flex;
flex-direction: column;
align-items: center;
p {
padding: 0;
margin: 10px;
}
.hzs-upload-icon {
font-size: 40px;
}
.hzs-upload-title {
font-size: 20px;
}
.hzs-upload-description {
font-size: 16px;
color: rgba(0, 0, 0, 0.45)
}
}
#global-uploader-btn:hover {
background: none;
}
#global-uploader-drop {
//height: 150px;
padding: 0;
}
#global-uploader-drop:hover {
border: 1px dashed #F5222D;
}
#global-uploader-dir-btn {
border: 1px solid #67c23a;
background: #67c23a;
}
.save-result {
position: absolute;
margin-top: -24px;
margin-left: 700px;
z-index: 10;
}
.query_check {
position: absolute;
margin-left: 700px;
margin-top: -50px;
z-index: 10;
}
.queryCheckShow {
margin-left: 10px;
color: red;
font-size: 12px;
}
</style>
调用
<MyUploaderBox
@canGoToNextStep='canGoToNextStep'
@canGoToPreStep='canGoToPreStep'
></MyUploaderBox>
参考
vue实现分片上传 https://blog.csdn.net/AIfurture/article/details/103975897
字节跳动面试官：请你实现一个大文件上传和断点续传 https://juejin.cn/post/6844904046436843527
vue-simple-uploader组件的使用感受 https://www.jianshu.com/p/da8ad489095e
大文件上传(秒传/断点续传)_使用Vue-Simple-Uploader插件 --Vue/Django完整实现 https://blog.csdn.net/qq_36852780/article/details/107437875
相关代码和文档：
https://github.com/ClearlightY/FileUpload
https://github.com/shady-xia/Blog/tree/master/vue-simple-uploader
https://github.com/simple-uploader/Uploader
到此这篇关于vue2中基于vue-simple-upload的文件分片上传组件的文章就介绍到这了,更多相关vue-simple-upload文件分片上传内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！
赞 (0)
相关推荐
-
基于vue-simple-uploader封装文件分片上传、秒传及断点续传的全局上传插件功能
1. 前言 之前公司要在管理系统中做一个全局上传插件,即切换各个页面的时候,上传界面还在并且上传不会受到影响,这在vue这种spa框架面前并不是什么难题.然而后端大佬说我们要实现分片上传.秒传以及断点续传的功能,听起来头都大了. 很久之前我写了一篇webuploader的文章,结果使用起来发现问题很多,且官方团队不再维护这个插件了, 经过多天调研及踩雷,最终决定基于vue-simple-uploader插件实现该功能,在项目中使用起来无痛且稳定. 如果你只是想实现基本的(非定制化的)上传功能,直
-
Vue上传组件vue Simple Uploader的用法示例
在日常开发中经常会遇到文件上传的需求,vue-simple-uploader 就是一个基于 simple-uploader.js 和 Vue 结合做的一个上传组件,自带 UI,可覆盖.自定义:先来张动图看看效果: 其主要特点就是: 支持文件.多文件.文件夹上传 支持拖拽文件.文件夹上传 统一对待文件和文件夹,方便操作管理 可暂停.继续上传 错误处理 支持"快传",通过文件判断服务端是否已存在从而实现"快传" 上传队列管理,支持最大并发上传 分块上传 支持进度.预估剩
-
vue-simple-uploader上传成功之后的response获取代码
我就废话不多说了,大家还是直接看代码吧~ <template> <uploader :options="options" :file-status-text="statusText" class="uploader-example" ref="uploader" @file-success="fileSuccess"></uploader> </template&g
-
vue2中基于vue-simple-upload实现文件分片上传组件功能
本文最主要参考的是这一篇,后端也是用django来完成. 大文件上传(秒传/断点续传)_使用Vue-Simple-Uploader插件 --Vue/Django完整实现 https://www.jb51.net/article/206178.htm 参考的代码地址:https://github.com/ClearlightY/FileUpload vue-simple-upload文档:https://github.com/simple-uploader/Uploader <template>
-
利用Vue3+Element-plus实现大文件分片上传组件
目录 一.背景 二.技术栈 三.核心代码实现 四.总结 一.背景 实际项目中遇到需要上传几十个G的3d模型文件,传统上传就不适用了. 结合element提供的上传组件自己封装了文件分片上传的组件. 思路: 把文件拆分成若干分片 依次上传分片(每次上传前可校验该分片是否已经上传) 发起合并分片的请求 二.技术栈 Vue3+Ts+Element-Plus 其他库:spark-md5 后端接口: 上传分片接口 校验分片是否已上传接口 合并分片接口 三.核心代码实现 Element组件基础配置 <el-
-
基于Node.js的大文件分片上传示例
我们在做文件上传的时候,如果文件过大,可能会导致请求超时的情况.所以,在遇到需要对大文件进行上传的时候,就需要对文件进行分片上传的操作.同时如果文件过大,在网络不佳的情况下,如何做到断点续传?也是需要记录当前上传文件,然后在下一次进行上传请求的时候去做判断. 先上代码:代码仓库地址 前端 1. index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8
-
Vue2.0结合webuploader实现文件分片上传功能
Vue项目中遇到了大文件分片上传的问题,之前用过webuploader,索性就把Vue2.0与webuploader结合起来使用,封装了一个vue的上传组件,使用起来也比较舒爽. 上传就上传吧,为什么搞得那么麻烦,用分片上传? 分片与并发结合,将一个大文件分割成多块,并发上传,极大地提高大文件的上传速度. 当网络问题导致传输错误时,只需要重传出错分片,而不是整个文件.另外分片传输能够更加实时的跟踪上传进度. 实现后的界面: 主要是两个文件,封装的上传组件和具体的ui页面,上传组件代码下面有列出来
-
vue+Minio实现多文件进度上传的详细步骤
目录 背景 实现方案 了解一下Mino 实现步骤 1.创建存储桶 2.选择文件 3.创建上传队列 4.开始上传 5上传完成后,同步文件地址给后端 6.删除文件 完整代码 源码分享 总结 背景 最近突然接到了一个产品的需求,有点特别,在这里给大家分享一下,需求如下 提交表单,同时要上传模型资源 模型文件是大文件,要显示上传进度,同时可以删除 模型文件要上传到服务器,表单数据同步到数据库 同时要同步上传后的模型地址到数据库 后端使用Minio做文件管理 设计图如下 一开始以为是一个简单的表单上传,发
-
vue 大文件分片上传(断点续传、并发上传、秒传)
对于大文件的处理,无论是用户端还是服务端,如果一次性进行读取发送.接收都是不可取,很容易导致内存问题.所以对于大文件上传,采用切块分段上传,从上传的效率来看,利用多线程并发上传能够达到最大效率. 本文是基于 springboot + vue 实现的文件上传,本文主要介绍vue实现文件上传的步骤及代码实现,服务端(springboot)的实现步骤及实现请移步本人的另一篇文章: springboot 大文件上传.分片上传.断点续传.秒传 上传分步: 本人分析上传总共分为: MD5读取文件,获取文件的
-
Vue.Js及Java实现文件分片上传代码实例
说明 代码从项目中剥离修改,未经测试,仅提供思路. 前端 upload(file) { //从后台获取已经上传的文件分片数 getIdx(md5) .then(function(res) { let retry = 3; uploadPart(retry, file, res.data); }) .catch(); } uploadPart(retry, file, idx) { //设置分片大小(单位Byte) let bufferLength = 1024 * 1024 * 5; //计算开
-
基于Vue3的全屏拖拽上传组件
本文主要介绍了基于Vue3的全屏拖拽上传组件,分享给大家,具体如下: 知识点 浏览器拖拽 api fetch 请求 vue3 说来话长,长话短说,关于 html5 的拖拽 api 也只是做过一些拖拽排序的例子.其实思路上与其他拖拽上传组件基本一样,都是指定一个区域可拖拽,然后读取文件在上传 先说说拖拽 api,这个是 html5 新增的一个 api,给一个元素设置 draggable = true 属性时,该元素就会支持拖拽 拖拽元素事件如下 1. ondrag 当拖动元素的时候运行脚本 2.
-
python实现文件分片上传的接口自动化
背景和目的: 利用python request 编写脚本测试公司系统的文件上传接口.前端读取文件的大小然后文件分片传给后端,后端将每一片数据重新组合成文件.大概的过程是:前端将整个文件的md5.size(大小).name(文件名).ext(文件后缀).totalchunk(分片总数)与分片文件的md5.chunk(分片数据),chunkindex(当前分片文件的下标)等传给后台,后台取得这些数据后,通过chunkindex将每一片数据重组,重组完后,进行md5校验,判断文件上传是否成功.我只需要