免费作文网站注册网站多少钱一年

免费作文网站,注册网站多少钱一年,自己制作网站视频教程,杭州做网站的公司一个前端菜鸟的大文件上传奋斗史 大家好#xff0c;我是一个在浙江某大学网络工程专业摸爬滚打的大三狗#x1f436;#xff0c;最近被一个小小的文件管理系统项目折磨得死去活来… 我的简单需求清单 #x1f4dd; 文件上传#xff1a;不就是传…一个前端菜鸟的大文件上传奋斗史大家好我是一个在浙江某大学网络工程专业摸爬滚打的大三狗最近被一个小小的文件管理系统项目折磨得死去活来…我的简单需求清单 文件上传不就是传个文件吗简单等等…10G的文件文件夹上传要保留层级结构的那种哦断点续传关了浏览器、重启电脑都不能丢进度加密传输不能让隔壁寝室的小王偷看我的学习资料浏览器兼容从IE8到各种国产浏览器一个都不能少我的技术栈 前端Vue3 原生JS老师说要锻炼基础开发工具VSCode配色必须用暗黑主题才显得专业后端Python刚学目前只会print(“Hello World”)数据库MySQL只会简单的增删改查服务器先放我F盘等有钱了再搞个CentOS虚拟机我的血泪史 在网上找了一圈代码不是功能不全就是根本跑不起来那些开发者连个联系方式都不留出了bug只能自求多福。我寻思着这代码写得跟薛定谔的猫似的——你不运行就不知道它能不能用于是我一怒之下建了个QQ群374992201欢迎同是天涯沦落人的小伙伴们加入。新人入群送1-99元红包99元的那个红包我还没见过长啥样还有各种超级会员、代理商头衔等你来拿其实就是大家一起互相折磨罢了前端代码实现Vue3版 1. 大文件分片上传核心逻辑// FileUploader.vueexportdefault{data(){return{fileList:[],folderList:[],chunkSize:5*1024*1024,// 5MB一个分片maxRetries:3,// 最大重试次数uploadProgress:{},// 上传进度resumeData:JSON.parse(localStorage.getItem(uploadResumeData))||{}// 断点续传数据}},methods:{// 处理文件选择handleFileChange(e){constfilesArray.from(e.target.files)files.forEach(file{// 10GB文件限制检查if(file.size10*1024*1024*1024){alert(文件大小超过10GB限制!)return}this.fileList.push(this.prepareFile(file))})},// 准备文件对象prepareFile(file){return{id:this.generateFileId(file),file,name:file.name,size:file.size,type:file.type,chunks:Math.ceil(file.size/this.chunkSize),uploadedChunks:0,status:pending,encrypted:false}},// 生成唯一文件IDgenerateFileId(file){returnfile.name_file.size_file.lastModified},// 开始上传asyncstartUpload(){for(constfileObjofthis.fileList){if(fileObj.statuscompleted)continuefileObj.statusuploadingawaitthis.uploadFile(fileObj)}},// 文件分片上传asyncuploadFile(fileObj){const{file,id,chunks}fileObjfor(leti0;ichunks;i){// 检查是否已经上传过该分片if(this.resumeData[id]?.includes(i)){fileObj.uploadedChunksthis.updateProgress(fileObj)continue}constchunkthis.getFileChunk(file,i)constformDatanewFormData()formData.append(file,chunk)formData.append(chunkIndex,i)formData.append(totalChunks,chunks)formData.append(fileId,id)formData.append(fileName,file.name)letretries0letsuccessfalse// 重试机制while(retriesthis.maxRetries!success){try{awaitthis.uploadChunk(formData)successtrue// 更新断点续传数据if(!this.resumeData[id]){this.resumeData[id][]}this.resumeData[id].push(i)localStorage.setItem(uploadResumeData,JSON.stringify(this.resumeData))fileObj.uploadedChunksthis.updateProgress(fileObj)}catch(error){retriesif(retriesthis.maxRetries){fileObj.statuserrorconsole.error(分片${i}上传失败:,error)}}}}if(fileObj.uploadedChunkschunks){fileObj.statuscompleted// 通知后端合并文件awaitthis.mergeFile(fileObj)}},// 获取文件分片getFileChunk(file,chunkIndex){conststartchunkIndex*this.chunkSizeconstendMath.min(file.size,startthis.chunkSize)returnfile.slice(start,end)},// 更新进度updateProgress(fileObj){constprogressMath.round((fileObj.uploadedChunks/fileObj.chunks)*100)this.uploadProgress[fileObj.id]progressthis.$forceUpdate()},// 上传分片实际请求需要根据后端实现uploadChunk(formData){returnnewPromise((resolve,reject){constxhrnewXMLHttpRequest()xhr.open(POST,/api/upload/chunk,true)xhr.onload(){if(xhr.status200xhr.status300){resolve(xhr.response)}else{reject(xhr.statusText)}}xhr.onerror()reject(Network error)xhr.send(formData)})},// 合并文件实际请求需要根据后端实现mergeFile(fileObj){returnfetch(/api/upload/merge,{method:POST,headers:{Content-Type:application/json},body:JSON.stringify({fileId:fileObj.id,fileName:fileObj.name,totalChunks:fileObj.chunks})})},// 文件夹上传处理handleFolderUpload(e){constitemse.dataTransfer?.items||e.target.filesthis.processFolderItems(items)},// 递归处理文件夹内容asyncprocessFolderItems(items,path){for(leti0;iitems.length;i){constentryitems[i].webkitGetAsEntry?.()||items[i]if(entry.isFile){entry.file(file{constfileObjthis.prepareFile(file)fileObj.pathpaththis.fileList.push(fileObj)})}elseif(entry.isDirectory){constdirReaderentry.createReader()dirReader.readEntries(entries{this.processFolderItems(entries,${path}${entry.name}/)})}}},// 简单加密函数演示用实际应该使用更强大的加密算法simpleEncrypt(data){// 这里应该使用Web Crypto API或其他加密库// 仅为演示实际项目中请勿使用这种简单加密returnbtoa(unescape(encodeURIComponent(data)))}}}2. 兼容IE8的polyfills和hack // polyfills.js// 兼容IE8的File API polyfillif(typeofFileundefined){functionFile(){// 简陋的模拟实现}}// 兼容IE8的Blob polyfillif(typeofBlobundefined){functionBlob(){// 简陋的模拟实现}}// 兼容IE8的FormData polyfillif(typeofFormDataundefined){functionFormData(){this.data[]this.appendfunction(key,value){this.data.push({key:key,value:value})}}}// 兼容旧版浏览器的requestAnimationFrameif(!window.requestAnimationFrame){window.requestAnimationFramefunction(callback){returnsetTimeout(callback,1000/60)}}// 兼容旧版浏览器的fetch APIif(!window.fetch){window.fetchfunction(url,options){returnnewPromise(function(resolve,reject){varxhrnewXMLHttpRequest()xhr.open(options.method||GET,url)if(options.headers){Object.keys(options.headers).forEach(function(key){xhr.setRequestHeader(key,options.headers[key])})}xhr.onloadfunction(){resolve({status:xhr.status,json:function(){returnPromise.resolve(JSON.parse(xhr.responseText))},text:function(){returnPromise.resolve(xhr.responseText)}})}xhr.onerrorreject xhr.send(options.body)})}}我的卑微请求 求后端大佬有没有Python后端大佬愿意带带我我可以用我的毕设成果如果我能做出来的话回报您求工作推荐马上要毕业了有师哥师姐在招人吗我要求不高能给口饭吃就行最好能顺便教教我后端。求学习伙伴加我QQ群374992201我们一起从入门到放弃再从放弃到入门最后的小广告 加入我们群你将获得1-99元红包99元的那位同学请私聊我领奖一起学习的小伙伴互相折磨到白头可能的就业机会等我们学会后互相内推无限的快乐看着别人和自己一样痛苦记住我们的口号“今天不努力明天做后端”免责声明以上代码仅供参考实际项目中请根据需求修改。作者不对因使用此代码导致的电脑爆炸、头发脱落、挂科等后果负责。将组件复制到项目中示例中已经包含此目录引入组件配置接口地址接口地址分别对应文件初始化文件数据上传文件进度文件上传完毕文件删除文件夹初始化文件夹删除文件列表参考http://www.ncmem.com/doc/view.aspx?ide1f49f3e1d4742e19135e00bd41fa3de处理事件启动测试启动成功效果数据库效果预览文件上传文件刷新续传支持离线保存文件进度在关闭浏览器刷新浏览器后进行不丢失仍然能够继续上传文件夹上传支持上传文件夹并保留层级结构同样支持进度信息离线保存刷新页面关闭页面重启系统不丢失上传进度。下载示例点击下载完整示例