<!-- PROGRESS --> <div class="progress"> <span>上传进度：{{ total | totalText }}%</span> <el-link type="primary" v-if="total > 0 && total < 100" @click="handleBtn" >{{ btn | btnText }}</el-link > </div>
<!-- VIDEO --> <div class="uploadImg" v-if="video"> <video :src="video" controls /> </div> </div> </template> <script> import { fileParse } from "./assets/utils"; import axios from "axios"; import SparkMD5 from "spark-md5";
export default { name: "App4", data() { return { total: 0, //上传进度条 video: null, //存储地址path btn: false, //暂停和开始按钮 }; }, filters: { btnText(btn) { return btn ? "继续" : "暂停"; }, totalText(total) { return total > 100 ? 100 : total; }, }, methods: { async changeFile(file) { if (!file) return; file = file.data;
// 1解析为BUFFER数据 // 32我们会把文件切片处理：把一个文件分割成为好几个部分（固定数量/固定大小） // 每一个切片有自己的部分数据和自己的名字 // HASH_1.mp4 // HASH_2.mp4
let buffer = await fileParse(file, base64); (spark = new SparkMD5.ArrayBuffer()), hash, suffix, spark.append(buffer), (hash = spark.end()); suffix = /\.([0-9a-zA-Z]+)$/i.exec(file.name)[1]; // 创建100个切片，生成切片 let partList = []; partsize = file.size / 100; cur = 0; for (let i = 0; i < 100; i++) { let item = { chunk: file.slice(cur, cur + partsize), filename: `${hash}_${i}.${suffix}`, }; cur += partsize; partList.push(item); } this.partList = partList; this.hash = hash; this.requestList(); }, async requestList() { let requestList = []; this.partList.forEach((item, index) => { let fn = () => { let fordata = new FormData(); formData.append("chunk", item.chunk); //append传给服务器的名字叫chunk 值是item.chunk formData.append("filename", item.filename); return axios .post("/single3", formData, { headers: { "Content-Type": "multipart/form-data" }, }) .then((result) => { result = file.data; if (code === 0) { total += 1; this.partList.splice(index, 1); } }); }; requestList.push(fn); }); }, }, };