浏览器文件上传、下载
文章目录概要获取文件与上传files与Blobs互转fileReader转成base64或text文件上传分二进制blob(ForData)上传和base64上传文件切片上传文件下载概要获取文件与上传templateinput typefilenamefilechangefileChange//templatescript setupconstfileChange(e){constfilee.target.files[0]// if(file.size 10 * 1024 * 1024){// 如果大于10M逻辑// }}/scriptfiles与Blobs互转blob可用于文件切片或者缩略图截取部分图片做缩略图、文本预览const_sliceBlobnewBlob([file]).slice(0,5000)const_sliceFilenewFile([_sliceBlob],test.png)fileReader转成base64或text将file或blob转成base64或textconstfrnewFileReader()// blob转base64// fr.readAsDataURL(new Blob([file]))// file 转base64fr.readAsDataURL(file)// fr转化是异步fr.onloadfunction(){console.log(fr.result)}// 转文本 readAsText文件上传分二进制blob(ForData)上传和base64上传1base64是字符串直接上传2blob需要使用FormDataconst_formDatanewForData()// append名字文件必须// appenduser,xxxx其他信息 可选_formData.append(file,file)axios.post(/xxx,_formData)文件切片上传伪代码// 一般每段切2MconstfileSizefile.sizeconstsize2*1024*1024constcurrentlocalStroage.getItem(file.name)||0while(currentfileSize){const_formDatanewForData()// 传文件名服务端判断名字相同就拼接_formData.append(file.name,file.slice(current,currentsize))axios.post(/xx,_formData)currentsize// 持久化缓存做断点续传localStroage.setItem(file.name,current)// 进度条constpercentMath.min((current/fileSize)*100,100)}文件下载1直接打开下载地址无法命名适用get直接返回blob的接口window.open(url)2利用a标签的download// 按blob请求接口二进制流文件axios(/xxxx/load{responseType:blob}).then(res{if(window.navigator.msSaveBlob){// IE兼容window.navigator.msSaveBlob(res.data,application/vnd.openxmlformats-officedocument.presentationml.presentation)}else{constblobURLURL.createObjectURL(res,data)constlinkdocument.createElement(a)link.hrefblobURL link.downloadtest.pnglink.style.displaynonelink.click()// 销毁URL地址URL.revokeObjectURL()}})3file-saver现成的库import{saveAs}fromfile-saveraxios(/xxxx/load{responseType:blob}).then(res{saveAs(res.data,xxx.ppt)})
