文件上传

原文转载自「刘悦的技术博客」https://v3u.cn/a_id_218 分治算法是一种很古老但很求实的办法。本意即便将一个较大的整体打碎分成小的部分，这样每个小的部分都不足以反抗大的整体。战国时期，秦国毁坏合纵的连横即是一种分而治之的伎俩；十九世纪，比利时殖民者霸占卢旺达， 将卢旺达的种族分为胡图族与图西族，以图进行决裂管制，莫不如是。 21世纪，人们往往会在Leetcode平台上刷分治算法题，但事实上，从工业角度上来看，算法如果不和理论业务场景相结合，算法就永远是扑朔迷离的存在，它只会呈现在开发者的某一次不经意的面试中，而实在的算法，并不是虚空的，它应该能帮忙咱们解决理论问题，是的，它应该落地成为实体。 大文件分片上传就是这样一个符合分治算法的场景，现而今，视频文件的体积越来越大，高清视频体积大略2-4g不等，但4K视频的分辨率是规范高清的四倍，须要四倍的存储空间——只需两到三分钟的未压缩4K 电影，或者电影预告片的长度，就能够达到500GB。 8K视频文件更是大得难以想象，而当初12K正在呈现，如此微小的文件，该怎么设计一套正当的数据传输计划？这里咱们以前后端拆散我的项目为例，前端应用Vue.js3.0配合ui库Ant-desgin，后端采纳并发异步框架Tornado实现大文件的分片无阻塞传输与异步IO写入服务。 前端分片首先，装置Vue3.0以上版本： npm install -g @vue/cli装置异步申请库axios： npm install axios --save随后，装置Ant-desgin: npm i --save ant-design-vue@next -SAnt-desgin尽管因为已经的圣诞节“彩蛋门”事件而身败名裂，但主观地说，它仍然是业界不可多得的优良UI框架之一。 接着在我的项目程序入口文件引入应用： import { createApp } from 'vue' import App from './App.vue' import { router } from './router/index' import axios from 'axios' import qs from 'qs' import Antd from 'ant-design-vue'; import 'ant-design-vue/dist/antd.css'; const app = createApp(App) app.config.globalProperties.axios = axios; app.config.globalProperties.upload_dir = "https://localhost/static/"; app.config.globalProperties.weburl = "http://localhost:8000"; app.use(router); app.use(Antd); app.mount('#app')随后，参照Ant-desgin官网文档：https://antdv.com/components/... 构建上传控件： ...