<template>
<div>
<input
type="file"
@change="handleFileChange"
/>
<el-button @click="handleUpload">上传</el-button>
</div>
</template>
<script>
const SIZE = 10 * 1024; // 切片大小
export default {
data: () => ({
container: {
file: null
},
data: []
}),
methods: {
request () { },
handleFileChange (e) {
// this.container.file
const [file] = e.target.files
this.container.file = file;
},
// 生成文件切片
createFileChunk (file, size = SIZE) {
const fileChunkList = [];
let cur = 0;
while (cur < file.size) {
fileChunkList.push({ file: file.slice(cur, cur + size) });
cur += size;
}
return fileChunkList;
},
// 上传切片
async uploadChunks () {
const requestList = this.data
.map(({ chunk, hash }) =
Vue切片上传
最新推荐文章于 2024-07-18 10:51:36 发布
本文介绍了如何在Vue.js应用中实现文件的切片上传功能,通过JavaScript的File API进行文件切割,然后逐片发送到服务器,以提高大文件上传的效率和用户体验。
摘要由CSDN通过智能技术生成